16

If you have a route such as: 

<Route path="/users/:userId" />

And then you export that route, and so it can be used across your app, such as:

export const MY_ROUTE = '/users/:userId/';

<Route path={MY_ROUTE} />

How do you set the param in a link dynamically? i.e. I would like to do this:

<Link to={MY_ROUTE} params={{userId: 1}} />

but params is totally ignored... and query just makes a query (?userId=) not a param... any ideas?

Elliot
  • 12,770
  • 29
  • 76
  • 116
  • What do you mean by set the param dynamically? The route should be matched automatically when you hit `/users/123` – Mario Tacke Jun 28 '16 at 20:43

3 Answers3

9

Taken from React Router official docs:

From the upgrade guide from 1.x to 2.x:

<Link to>, onEnter, and isActive use location descriptors

<Link to> can now take a location descriptor in addition to strings. The query and state props are deprecated.

// v1.0.x

<Link to="/foo" query={{ the: 'query' }}/>

// v2.0.0

<Link to={{ pathname: '/foo', query: { the: 'query' } }}/>

Unfortunately, there's no support for passing in a param object, you yourself saw that.

In order to dynamically use the route you proposed, you would have to do something along the lines of:

<Link to={ MY_ROUTE.replace(':userId', '<someUserIdFromSomewhere>') }/>

Or you could further optimize by instead of exporting a string for MY_ROUTE, you could export a userLink function as such:

function userLink(userId) {
    return `/users/${userId}/`;
}

and then use that wherever you would want to use a Link to the route.

Below you can find supported parameters and API exposed on the Link component:

Router Link API

Elod Szopos
  • 3,168
  • 17
  • 31
  • 2
    You can try using [url-pattern](https://www.npmjs.com/package/url-pattern) to construct your urls: `path={new UrlPattern(MY_ROUTE).stringify({ userId: 1})}`. It is not a perfect match but for simple routes it can work – Brandon Jun 28 '16 at 20:57
6

I know this is an old question, but with React Router V4 you can use the path-to-regexp package, which is also being used by React Router V4.

Example:

import {Link} from 'react-router-dom';
import {compile} from 'path-to-regexp';

const MY_ROUTE = '/users/:userId/';
const toPath = compile(MY_ROUTE);

// Now you can use toPath to generate Links dynamically
// The following will log '/users/42' to the console
console.log( toPath({ userId: 42 }) );

Of course you can use the toPath method to create proper links as well, example: 

<Link to={toPath({ userId: 42 })}>My Link</Link>
bummzack
  • 5,781
  • 1
  • 22
  • 44
5

You could create a function which interpolate the userId param to create the route, something like this: 

export const MY_ROUTE = (userId) => `/users/${userId}/`;

<Route path={MY_ROUTE(':userId')} />

And so in your component

<Link to={MY_ROUTE(1)} params={{userId: 1}} />

Try this solution here: https://jsbin.com/pexikoyiwa/edit?js,console

NickGnd
  • 4,517
  • 1
  • 16
  • 25
  • This should be accepted answer, it allows to build both path required by router and actual path in the redirects in the clearest way – VanDavv Jul 30 '18 at 06:26