Question

我正在尝试使用react路由器的Link将状态传递给另一个Route的组件。尝试将路径名与变量一起使用时，出现错误– TypeError：string.substr不是函数。

{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 | };

Answer 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)

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

1 个答案: