使用动态确定的 slug 将路由反应到页面

Question

我正在使用 React、Redux 和 React-router，并希望以下用例能够工作：

• 从显示条目列表的页面（每个条目都有一个唯一的 id 和一个已知的 slug）
• 当您单击一个条目时，您将被带到该条目的页面
• 该页面是动态加载的 - 使用页面的 id 发送 ajax 请求，并根据请求的输出填充所有内容。

如何使用每个项目的 slug 创建一个 url？现在我只有一个固定的

<Route path="/item" component={ItemPage} />

我想要的是

<Route path="/<slug>" component={ItemPage} />

只有当您从另一个页面导航到该页面时才知道 slug。

我遇到的另一个问题 - 页面的所有内容在刷新时消失。这是因为我通过 state 将 item id 传递给了 ItemPage，并且在刷新后该 id 不再设置在 state 中。

也许更一般地说，实现上述行为的方法是什么？这似乎是一个常见的用例，我找不到有关如何操作的好参考。

Answer 1

你可以这样做：

<Route path="/:slug" component={ItemPage} />

从 URL 参数的 react-router 文档中查看此示例。