17

如果您有如下路线：

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

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

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

<Route path={MY_ROUTE} />

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

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

但是 params 完全被忽略了...查询只是进行查询 (?userId=) 而不是参数...有什么想法吗？

4

3 回答 3

9

取自React Router 官方文档：

从 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路线的任何地方使用它。

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

路由器链接 API

于 2016-06-28T20:45:34.303 回答
7

我知道这是一个老问题，但是对于 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>
于 2017-06-22T12:58:32.057 回答
5

您可以创建一个插入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

于 2016-06-28T20:57:05.790 回答