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

Posted

技术标签:

【中文标题】使用动态确定的 slug 将路由反应到页面 [重复]【英文标题】:React routing to a page with dynamically determined slug [duplicate] 【发布时间】:2018-04-22 15:19:06 【问题描述】:

我正在使用 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 中。

也许更一般地说,实现上述行为的方法是什么?这似乎是一个常见的用例,我找不到如何做的很好的参考。

【问题讨论】:

【参考方案1】:

你可以这样做:

&lt;Route path="/:slug" component=ItemPage /&gt;

在 URL 参数的 react-router 文档中查看 this example。

【讨论】:

以上是关于使用动态确定的 slug 将路由反应到页面 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

Next.js 动态路由错误:提供的路径 `page-name` 与页面不匹配:`/[slug]`

如何设置动态路由以在 CodeIgniter 中使用 slug?

如何基于 GraphQL API 的 slug 使用 Next.js 进行动态路由?

使用 Gatsby mdx.slug 的重复页面

反应路由器链接以有条件地渲染按钮

使用反应在引导程序中突出显示当前页面