React-router Link, pass in params

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

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 consoleconsole.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>

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