如何解决使用不同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
<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 ...
我可能会考虑这个问题,第二个解决方案不是世界末日,但我仍然想知道是否有更好的解决方案。
预先感谢:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。