accessing url parameter in react-router

Question

I declare my route like this:

<Row>
  <Route exact path="/services" render={() => <RoutesList {...this.props} />} />
  <Route exact path="/services/new" render={() => <AddRoute {...this.props} />} />
  <Route exact path="/services/edit/:id" render={() => <AddRoute />} />
</Row>

Then in some part of my code i create a link like this :

<Link to={`/services/edit/${record.id}`}>Edit</Link>

in <Route> I can see the id in math.params but in <AddRoute> I cant access this the url parameter even when I pass the {...this.props} for example <AddRoute {...this.props}> I cant see the url parameter and match is empty. my packages is :

"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",

Maybe you need to provide the parameter name in the url segment. (/:id) — Hosar
– Hosar, Commented Jul 1, 2017 at 11:58

trixn · Accepted Answer · 2017-07-01 13:12:16Z

The props of the component that renders your jsx code above does of course not contain the match object. How could it? See the example in the docs on how to pass props to a component in the inline render function:

// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>}/>

// wrapping/composing
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props}/>
    </FadeIn>
  )}/>
)

<FadingRoute path="/cool" component={Something}/>

The inline render() function get's passed the three route props match, location, history. You have to pass the props that your arrow render()function receives to your component. Than you will be able to access this.props.match.id in your AddRoute component:

<Row>
  <Route exact path="/services" render={() => <RoutesList {...this.props} />} />
  <Route exact path="/services/new" render={() => <AddRoute {...this.props} />} />
  <Route exact path="/services/edit/:id" render={props => <AddRoute {...props} />} />
</Row>

Also you shouldn't always pass all props to child components. If your AddRoute component is only interested in the id than you should only pass the id:

<Route exact path="/services/edit/:id" render={props => <AddRoute id={props.match.id} />

That may also apply to you other components where you spread this.props. Only pass props that are relevant to the component or you will end up with a big mess that is very hard to debug.

Collectives™ on Stack Overflow

accessing url parameter in react-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related