【问题标题】:Complex routing in NextJsNextJs 中的复杂路由
【发布时间】:2021-11-10 13:27:35
【问题描述】:

我正在尝试在 NextJs 应用程序中创建描述性路由,但是我正在努力使用基于 nextJs 文件的路由系统。 网络中的预期路线是:(/posts/id/mail); 我在项目中是如何做到的:

Posts
 - index.js
 - [id]
   - mail.js

如您所见,我的 [id] 文件夹中没有 index.js,因此每当有人决定在没有 '/mail' 的情况下转到 /posts/id 时,它都会是 404。 所以基本上我的问题是:如何将 mail.js 转换为 index.js 并使 URL 保持不变(最后是 /mail)。

如果没有办法使用 nextjs 原生地做到这一点,如果您让我知道,我也将不胜感激。

【问题讨论】:

  • 显然,在这种情况下,只有重定向有帮助

标签: reactjs next.js


【解决方案1】:

一网打尽

这可能不是您喜欢的方式,但您可以使用catch all route 将[id] 和mail.js 放在一个文件中。

例如如果你有一个文件[...post].jsx 并调用路由/someid/mail 或只是/someid 你将有params.post 是一个像[ 'someid', 'mail' ] 或只是[ 'someid' ] 的数组。

重定向

除此之外,我还没有找到任何方法让文件夹本身成为没有索引文件(或任何其他文件)的路由,特别是对于像www.example.com/ 这样的路由(即没有/index附加到它)。我通过使用一些“不需要”的路径 /main 解决了它,然后将其重定向到 /。

备注:

我发现特定路由/index在某些情况下会导致错误,这就是我选择/main的原因。

我记不太清了,这可能取决于您是否希望两个路由('/index' 和 '/')都有效并指向同一个文件(并在地址栏中保持可见),或者是否只有其中一个应该是有效的并重定向到另一个。同样在这种情况下,我的路径来自getStaticPaths,而不是来自文件。

【讨论】:

  • 谢谢,但我最终为每个文件夹创建了 index.js,并在 getServerSideProps 中添加了重定向
猜你喜欢
  • 2020-06-03
  • 2011-01-03
  • 1970-01-01
  • 2014-11-07
  • 2021-07-04
  • 2013-11-20
  • 2015-09-20
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多