Next.js 从“pages/[...slug].js”路由不起作用答案

【问题标题】：Next.js routing from "pages/[...slug].js" not workingNext.js 从“pages/[...slug].js”路由不起作用
【发布时间】：2021-08-13 13:23:21
【问题描述】：

这是我的页面文件夹的样子：

pages
   index.js  
   [...slug].js

我知道问题肯定在于我直接在 pages 文件夹中使用捕获所有路由，因为我尝试使用“pages/page/[...slug] .js 结构，一切正常。

当使用 Link 组件从 index.js 页面导航到 [...slug].js 页面（例如 /careers 或 /blog）时，一切正常。

但是从 [...slug].js 页面（例如 /contact）导航到另一个类似页面（例如 /blog）时，只有 URL 正确更改，但 内容页面保持不变，因此不会重新呈现。

注意：从 [...slug].js 页面导航回根文件 (href="/") 有效。

【问题讨论】：

【解决方案1】：

在您的页面文件夹中使每个页面成为自己的文件。例如，您可以：

pages/
  index.js
  contact.js
  careers.js
  blog.js

每个文件都应该导出一个返回 JSX 的默认函数。

【讨论】：

【解决方案2】：

TLDR：
从 getStaticProps 或 getServerSideProps 函数返回一组 props 时，返回一个“key”prop 并为其分配一个唯一值，以便 react 能够区分从同一动态路径提供的两个页面。

我从去年的github issue中找到了“问题”的解决方案：https://github.com/vercel/next.js/issues/9992

您可以通过阅读我链接的问题找到明确的解决方案。

【讨论】：