React-router Link, 传入参数

Question

如果您有如下路线：

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

然后导出该路由，这样它就可以在您的应用中使用，例如：

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

<Route path={MY_ROUTE} />

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

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

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

Answer 1

摘自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' } }}/>

不幸的是，不支持传入 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

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

Answer 3

我知道这是一个老问题，但是对于 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 4

React Router v5 有一个内置方法来接收你的 url 模式和一个映射到 url 参数的对象，称为 generatePath

https://v5.reactrouter.com/web/api/generatePath

import { generatePath } from "react-router";

generatePath("/user/:id/:entity(posts|comments)", {
  id: 1,
  entity: "posts"
});
// Will return /user/1/posts

因此在您的示例中使用的是

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

React-router Link, 传入参数

React-router Link, pass in params

reactjs

react-router

react-router-redux