next.js - 如何在动态路由中指定可选参数？

Question

假设我有一个 page这将显示本书中每一章的详细信息。用户可以从该页面导航到其他章节，因为屏幕侧边栏中有章节按钮，主要内容显示了章节的详细信息。
现在，用户将从书籍列表导航到该页面。在页面信息中，没有那本书的章节信息。
现在，如果 URL 是 \bookSlug ，所以页面会显示第一章的详细信息，即使 URL 中没有提到它，它也会获取章节列表，然后从该列表中获取第一章的详细信息。 URL \bookSlug\firstChapterSlug 的这种行为保持不变.

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

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

在页面上，我处理参数，即 chapterId未定义为仅获取第一章或仅获取chapterId 参数中提到的章节。
现在，我被困在这里，

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

它只是不起作用，即使我已经在 getStaticPaths 中标记了参数可选 GetStaticPaths<Props, {bookSlug: string, chapterSlug?: string}>我可以写逻辑。
如何在 nextJS 动态路由中实现 react 路由器行为？

Answer 1

从 Next 9.5 开始，您可以使用 optional catch-all routes 来实现.
你会有这样的路线 /[bookId]/[[...chapterId]] .
并导航，自 Next 9.5.3 you don't need "as" property in Link所以下一个应该正确处理这个:<Link href='/some-book'/>