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

Question

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

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

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

---

因此，在react-router中，我曾经这样做过。

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

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

现在，我被困在这里，

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

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

如何在 nextJS 动态路由中实现 react-router 行为？

Answer 1

nextjs 无法进行这样的导航并且不正确，如果您提供href='/[bookSlug]/[chapterSlug]'您必须提供as='/some-book/some-chapter'

<Link href={'/[bookSlug]/[chapterSlug]' as={'/someBookName'} />
// this will produce an error

Error: The provided as value (/some-book) is incompatible with the href value (/[bookSlug]/[chapterSlug])

可能的解决方案 对于您要实现的目标，有两种可能的解决方案

如果您希望路由/some-book与[bookSlug]匹配并显示书籍详细信息的页面并仅显示某些章节，您必须创建一个index.tsx文件，该文件将用于仅获取书籍详细信息和数据第一章并从中返回一个新的页面组件。 例如，这就是pages文件夹结构的样子，

- pages
  - [bookSlug]
     - index.tsx  
     - [chapterSlug].tsx

// index.tsx can be used to fetch and  display the book details and first chapter

您必须明确导航到该页面，如下所示

// for navigating to /some-book (which will display only the first chapter)
<Link href='/[bookSlug]' as={'/some-book'} />

// for navigating to /some-book/some-chapter
<Link href='/[bookSlug]/[chapterSlug]' as='/some-book/some-chapter'/>

第二种解决方案是只保留动态路由的[bookSlug]部分，并获取所有章节的书籍详细信息和数据，并将其作为 props 传递。 要显示每个章节的详细信息页面，请使用shallow-routing 。

在导航到每一章时，您必须使用router.push而不是Link组件。

如果您正在考虑有条件地从 function getStaticPaths返回paths ，其中您只提供参数bookSlug的值并省略chapterSlug类似{ paths: [{ params: { bookSlug: 'some-book'} }]} ，这将不起作用.

对于/[bookSlug]/[chapterSlug].js ，如果您尝试执行类似的操作，它将在构建时生成错误

Error: A required parameter (chapterSlug) was not provided as a string in getStaticPaths for /[bookSlug]/[chapterSlug]

Answer 2

从 Next 9.5 开始，您可以使用可选的 catch-all routes来做到这一点。

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

为了导航，从 Next 9.5.3 开始，您不需要 Link 中的“as”属性，因此 Next 可以正确处理： <Link href='/some-book'/>