如何使用带有可变路径名的 React Router 的链接？答案

【问题标题】：How to use React Router's Link with a variable pathname?如何使用带有可变路径名的 React Router 的链接？
【发布时间】：2019-07-24 04:49:25
【问题描述】：

我正在尝试使用 react 路由器的 Link 将状态传递给另一个 Route 的组件。在尝试将路径名与变量一起使用时，我收到一个错误 - TypeError: string.substr is not a function。

{props.groups.map((group) =>
                    <Link to={{
                        pathname: `/groups/${group.uid}`,
                        state: { pass: group }
                      }}>
                        <li>{group.name}</li>
                        <p>{group.activeGame}</p>
                    </Link>
 )}

其中group.uid 是一个字符串，例如：ENkrRUicMoXdTeGpQRe5。

我希望这会链接到“/groups/:groupuid”，但会收到 TypeError: string.substr is not a function 引用 node_modules/@reach/router/es/lib/utils.js:5：

 var startsWith = function startsWith(string, search) {
> 5 |   return string.substr(0, search.length) === search;
  6 | };

【问题讨论】：

什么是group.uid？我们有例子吗？
group.uid 是一个字符串，例如：ENkrRUicMoXdTeGpQRe5
你有一个实际的页面或路由可以处理这个请求吗？
路由器设置为渲染组件：<Group path="groups/:groupId" user={user}/>
您的<Group> 组件中有什么？我认为问题在于它。

标签： reactjs react-router

【解决方案1】：

要将对象作为props 传递，您可以这样做，

<Link to={{
     pathname: `/groups/${group.uid}`,
     query: { pass: JSON.stringify(group} }
}}>
    <li>{group.name}</li>
    <p>{group.activeGame}</p>
</Link>

在访问props 时，您应该这样做，

JSON.parse(this.props.pass)

【讨论】：