Next.js 来自“pages/[...slug].js”的路由不起作用

Question

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

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

我知道问题肯定在于我直接在pages文件夹中使用 catch all routes，因为我尝试使用“pages/page/[...slug].js 结构并且一切正常。

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

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

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

Answer 1

TLDR：
当从 getStaticProps 或 getServerSideProps function 返回一组道具时，返回一个“关键”道具并为其分配一个唯一值，以便 React 能够区分从同一动态路径提供的两个页面。

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

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

Answer 2

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

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

每个文件都应导出返回 JSX 的默认 function。