14

(Disclaimer: I am new to React and React-Router, so this may be obvious to someone with more familiarity)

I am creating a simple project with React-Router 2.5.2 with ES6 and I have a working solution but it feels like it may not be the "React Router way". I have this Route:

<Route path="lists/:listId" component={List}/>

and elsewhere I have a Link:

<Link to={`/lists/${props.list._id}`}>{props.list.name}</Link>

Is this the preferred way to compose a "to" attribute that passes dynamic content? Or am I fundamentally misunderstanding React Router?

Matthew Nichols
  • 4,866
  • 4
  • 41
  • 48
  • Well, yes. If you need more control over location you can pass [LocationDescriptor](https://github.com/ReactJSTraining/history/blob/master/docs/Glossary.md#locationdescriptor) instead. – Yury Tarabanko Jul 08 '16 at 14:55

2 Answers2

19

In the API-documentation of react-router it is done in the exact same way:

// change the activeClassName
<Link to={`/users/${user.id}`} activeClassName="current">{user.name}</Link>

Reference: https://github.com/reactjs/react-router/blob/master/docs/API.md#link

Johannes Reuter
  • 3,501
  • 19
  • 20
6

You are doing it right! :)

As you can see in the docs, this is the correct way to pass the to prop:

https://github.com/reactjs/react-router/blob/v2.5.2/docs/API.md#link

In previous React Router versions, there was a prop called params, where you would pass all your route params.

https://github.com/ReactTraining/react-router/blob/v0.13.6/doc/03%20Components/Link.md#params

But I think the React Router team decided to keep things simple, so you decide how you will build your routes. Also, using ES6 templates fit very well with that.

William Martins
  • 1,969
  • 1
  • 18
  • 22
  • Url not working : https://github.com/reactjs/react-router/blob/0.13.x/doc/03%20Components/Link.md#params – Chandresh Mar 15 '18 at 12:01
  • Just updated the answer with the correct link (https://github.com/ReactTraining/react-router/blob/v0.13.6/doc/03%20Components/Link.md#params) @Chandresh – William Martins Mar 15 '18 at 14:51