如何在反应路由器上获取 {match.params.id} 的值

Question

这是我的代码示例，但我不知道如何取值和使用后

class View extends Component {
  componentDidMount() {
      var id = {match.params.id}
    }
    render() {
      return(
        <Router>
      <div>
        <Route path="/View/:id" component={Child}/>
      </div>
    </Router>
      )
    }
}

Answer 1

这可能对你有帮助。只需创建构造函数 ieconstructor(props) {}并在其中将 声明id为state类的变量。传递价值match.params.id的id利用id: this.props.match.params.id。

现在您可以在代码中的任何位置访问状态变量，并希望它能解决您的问题。

class View extends Component {
    constructor(props){
        super(props);

        this.state = {
            id : this.props.match.params.id
        }
    }
  componentDidMount() {
      var id = {this.state.id}
    }
    render() {
      return(
        <Router>
      <div>
        <Route path="/View/:id" component={Child}/>
      </div>
    </Router>
      )
    }
}

Answer 2

你可以这样做：

import { useParams } from 'react-router-dom';

function GetId() {
    const { id } = useParams();
    console.log(id);
    return (
        <div>
           your expected id : {id}
        </div>
    );
}