将 url 参数传递给 react-router 的 Link 组件的正确方法是什么？

Question

So far I've been replacing the url params' names manually when using a link component, for example:

const userIdParam = ':userId'

const routes = {
   userDetails: `/users/${ userIdParam }`
}

<Link to={{
   pathname: routes.userDetails.replace(userIdParam, user.id)
}}/>

Does react router support passing the params as props into the to object or something like this? I'm looking for something similar to the following:

const routes = {
   userDetails: `/users/:userId`
}

<Link to={{
   pathname: routes.userDetails,
   props: {
      userId: user.id
   }
}}/>

I've been going through the typings and the docs but can't really find anything.

Answer 1

Yes it does. If you want to navigate around then you can just use:

<Link to="/redirect-to-this-url"></Link>

Incase, you want to pass props via the react-router then do this.

// Initial Page
<Link to={{
    pathname: "redirected-route",
    state: {
        variable: value    // pass the extracted url params here
    }
}}
</Link>

The object passed in the state of Link would be accessible here by:

// Redirected component
this.props.location.state    // { variable: "value" }