字符串形式的链接有效，但对象形式无效

Question

我正在使用react路由器和Link，如下所示：

<nav>
...
{sidebarCollections.map((c, i) => (
<Link to={`/collection?id=${c.id}`} key={c.id}>
{c.name}
</Link>
))}
</nav>

但现在我需要通过Link传递一些数据。

我在React Router文档中发现，Link也可以接受一个带有状态字段的对象，这正是我所需要的。文档示例：

<Link
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>

所以我尝试：

<nav>
...
{sidebarCollections.map((c, i) => (
<Link
to={{
pathname: `/collection?id=${c.id}`,
// state: { name: "test"}
}}
key={c.id}
>
{c.name}
</Link>
))}
</nav>

所以我尝试了上面的，但突然它没有渲染。我试着注释掉state，只使用pathname字段来匹配我以前使用的字符串形式，但也没有用。

发生了什么，我如何通过链接将一些数据传递到我的组件中？是因为映射函数还是字符串插值可能会把它搞砸？

感谢

Answer 1

使用对象语法时，不能在pathname字段中添加查询参数。它需要作为search字段包含。我最终得到了一个解决方案：

<Link
to={{
pathname: `/collection`,
search: `?id=${c.id}`,
state: { name: c.name },
}}
key={i}
>
{sc.name}
</Link>

然后在我的组件中，我可以访问状态：

location.state.name