Question

如果您的路线如下：

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

然后您导出该路线，因此可以在您的应用中使用，例如：

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

<Route path={MY_ROUTE} />

如何动态设置链接中的参数？即我想这样做：

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

但是params完全被忽略了......查询只是查询（？userId =）而不是参数...任何想法？

Answer 1

取自React Router official docs：

从1.x到2.x的升级指南：

<Link to>，onEnter，isActive使用位置描述符

<Link to>现在除了字符串之外还可以使用位置描述符。   不推荐使用查询和状态道具。

// v1.0.x
<Link to="/foo" query={{ the: 'query' }}/>
// v2.0.0
<Link to={{ pathname: '/foo', query: { the: 'query' } }}/>

不幸的是，没有人支持传递param个对象，你自己就看到了。

为了动态使用您建议的路线，您必须按照以下方式执行以下操作：

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

或者您可以进一步优化，而不是导出MY_ROUTE的字符串，您可以导出userLink函数：

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

然后在想要使用Link到路线的任何地方使用它。

您可以在下面找到Link组件中公开的受支持参数和API：

Router Link API

Answer 2

我知道这是一个老问题，但是使用React Router V4，你可以使用path-to-regexp包，它也被React Router V4使用。

示例：

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 }) );

当然，您也可以使用toPath方法创建正确的链接，例如：

<Link to={toPath({ userId: 42 })}>My Link</Link>

Answer 3

您可以创建一个插入userId参数来创建路径的函数，如下所示：

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

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

在您的组件中

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

在此尝试此解决方案： https://jsbin.com/pexikoyiwa/edit?js,console

React-router Link，传递参数

3 个答案: