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

Question

(免责声明:我是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？

Answer 1

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

// 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

Answer 2

你做得对！:)

正如您在文档中看到的，这是传递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 模板非常适合这一点。