使用不同URL的Next.js动态路由

问题描述

我目前正在更新一个React项目以使用Next.js。我偶然发现了动态路由的一个小问题，到目前为止，我在网上找不到任何解决方案。

我有许多信息页面，这些信息页面使用相同的组件，并根据这些信息显示不同的内容。使用react-router可以将其指定如下：

path: /:infoPage(about-us|terms|privacy|contact|faqs)

/about-us,/terms,/privacy,/contact,/faqs

到目前为止，对于Next.js，我认为我将使用如下所示的动态路由。唯一的问题是，URL现在将具有/infoPage/___-/infoPage/about-us，/infoPage/terms。

/pages
   /infoPage
      /[infoPage].js

作为解决方案，可以使用as通过正确的URL更新链接：

<Link href="/infoPage/[infoPage]?infoPage=about-us" as="/about-us">
   <a>About Us</a>
</Link>

虽然在单击链接时有效，但是刷新页面将最终显示404页面-因为Next.js不会将任何页面识别为/about-us。

可能的解决方案

• 使用动态路由/pages/[infoPages].js。不太确定这是否是理想的解决方案，因为它很可能会像回退到其他任何页面一样。

• 我想我可以在/pages中分别声明每个页面，并在每个页面中导入相同的组件，但这会有些重复。

  /pages
      /about-us.js
      /terms.js
      ...
  

• 保留/infoPage/[infoPage].js路由，添加从客户端/服务器到正确URL的重定向

我可能会考虑这个问题，第二个解决方案不是世界末日，但我仍然想知道是否有更好的解决方案。

预先感谢：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）