来自"pages/[...slug].js“的...slug路由不工作

Question

我的pages文件夹是这样的：

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

我知道问题在于我直接在pages文件夹中使用catch所有路由，因为我尝试了一个“pages/page/.slg.js”结构，一切都很好。

当使用链接组件从index.js页面导航到...slug.js页面(例如/careers或/blog)时，所有东西都可以很好地运行。

但是当从...slug.js页面(例如/contact)导航到另一个类似的页面(例如/blog)时，只会正确地更改URL，但是页面的内容保持相同的，因此不会重新进行重新排序。

注意:从...slug.js页面导航回根文件(href="/")工作。

Answer 1

TLDR：

当从getStaticProps或getServerSideProps函数返回一组道具时，返回一个“键”支柱并为其分配一个唯一的值，这样react就能够区分来自同一动态路径的两个页面。

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

您可以找到一个清晰的解决方案，阅读我所链接的问题。

Answer 2

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

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

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