如何指定动态路由中的可选参数？

Question

假设我有一个page将显示书中每一章的详细信息的。用户可以从该页面导航到其他章节，因为屏幕侧边栏中有章节按钮，并且主要内容显示该章节的详细信息。

现在，用户将从书籍列表导航到该页面。在页面信息中，没有该书的章节信息。

现在如果 URL 是\bookSlug，那么页面将显示第一章的详细信息，即使 URL 中没有提及，它也会获取章节列表，然后从该列表中获取第一章的详细信息。对于 URL ，此行为保持不变\bookSlug\firstChapterSlug。

---

所以，react-router我曾经这样做过。

<Route path={'/:bookId/:chapterId?'} component={ChapterDetails} >

在页面上，我处理参数，该 idchapterId未定义，仅获取第一章或仅获取 ChapterId 参数中提到的章节。

现在我被困在这里了

<Link href={'/[bookSlug]/[chapterSlug]' as={'/someBookName'} >

它只是不起作用，即使我已经在getStaticPaths可选的GetStaticPaths<Props, {bookSlug: string, chapterSlug?: string}>参数中标记了我可以编写逻辑的参数。

如何在 nextJS 动态路由中实现反应路由器行为？

Answer 1

从 Next 9.5 开始，您可以使用可选的 catch-all 路由来完成此操作。

你会有这样的路线/[bookId]/[[...chapterId]]。

为了导航，从 Next 9.5.3 开始，您不需要链接中的“as”属性，因此 Next 应该正确处理这个问题： <Link href='/some-book'/>