如何在 React-Router 2.5 中创建动态链接到属性

Posted 2023-02-21

【中文标题】如何在 React-Router 2.5 中创建动态链接到属性

【英文标题】：How to create a dynamic Link to attribute in React-Router 2.5

【发布时间】：2016-11-11 04:29:12

【问题描述】：

（免责声明：我是 React 和 React-Router 的新手，所以这对于更熟悉的人来说可能很明显）

我正在使用带有 ES6 的 React-Router 2.5.2 创建一个简单的项目，我有一个可行的解决方案，但感觉它可能不是“React Router 方式”。我有这条路线：

<Route path="lists/:listId" component=List/>

在其他地方我有一个链接：

<Link to=`/lists/$props.list._id`>props.list.name</Link>

这是构成传递动态内容的“to”属性的首选方式吗？还是我从根本上误解了 React Router？

【问题讨论】：

嗯，是的。如果您需要对位置进行更多控制，可以改为传递 LocationDescriptor。

【参考方案1】：

你做得对！ :)

正如您在文档中看到的，这是传递 to 属性的正确方法：

https://github.com/reactjs/react-router/blob/v2.5.2/docs/API.md#link

在以前的 React Router 版本中，有一个名为 params 的道具，您可以在其中传递所有路由参数。

https://github.com/ReactTraining/react-router/blob/v0.13.6/doc/03%20Components/Link.md#params

但我认为 React Router 团队决定让事情变得简单，所以你决定如何构建你的路由。此外，使用 ES6 模板非常适合。

【讨论】：

网址无效：github.com/reactjs/react-router/blob/0.13.x/doc/03%20Components/…

刚刚用正确的链接更新了答案 (github.com/ReactTraining/react-router/blob/v0.13.6/doc/…) @Chandresh

【参考方案2】：

在react-router 的 API 文档中以完全相同的方式完成：

// change the activeClassName
<Link to=`/users/$user.id` activeClassName="current">user.name</Link>

参考：https://github.com/reactjs/react-router/blob/master/docs/API.md#link