React extract param from url

Question

I'm using react-router for routing . I've used NavLink and Route components like this:

 <NavLink className={classes.navLink}
          activeClassName={classes.activeNavLink}
          to={`/brokers/${n.id}`}\> 
....
<Route exact path="/brokers/:id" component={BrokerDetails} />

Now my question is - how do I use the id parameters passed in inside the BrokerDetails component ? I tried reading it via the props but it doesn't exist .

Answer 1

When using component= ..., your component will be passed the route props .

In particular, you'll want to access the match object:

const BrokerDetails = ({match}) => <div>{JSON.stringify(match.params)}</div>;

should show you all the parameters; match.params.id would be the id parameter.

Answer 2

If you try to access props.Id won't work because it isn't in that location.

When you try to access params from an URL, which is passed using 'React-router-dom', then the way to access the props is match.params.id