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

Question

this is my code example but I do not know how to take the value and after use it

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

Answer 1

This might help you. Just create constructor ie constructor(props) {} and inside it declare the id as a state variable to the class. Pass the value of match.params.id to the id by using id: this.props.match.params.id .

Now u can access the state variable anywhere in your code and hope it solves your problem.

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

尝试这个：

<Route path=`/View/${id}` component={Child}/>

Answer 3

Look here:

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/06-params

You component will be injected a prop params which you'll be able to get to like this:

  <div>
    <h2>{this.props.params.id}</h2>
  </div>

Answer 4

You can do it this way :

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

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

Answer 5

{match.params.id} like variable.

this.id = this.props.match.params.id;

this.apartament = json.find((entry) => entry.id === this.id);