使用不同URL的Next.js动态路由
我目前正在更新一个使用Next.js的React项目。我偶然发现了一个关于动态路由的小问题，到目前为止，我还没有在网上找到任何解决方案。
我有许多信息页面，使用相同的组件，并显示不同的内容，基于段塞。使用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 /约-us.js /terms.js . - 保持
/infoPage/[infoPage].js路由，将重定向从客户机/服务器添加到正确的URL
我可能已经想过了，第二个解决方案不会是世界末日，但我仍然在想，是否有更好的解决方案。
(预先谢谢:)
回答 1
Stack Overflow用户
发布于 2021-10-26 15:55:23
如果有人在寻找这个问题的答案，这里有两个解决方案，你可以考虑。
1. /pages中的根级动态路径
用例:使用具有相似数据的相同组件的页面(例如API调用获取页面内容)
如果在根级别上具有某些类似的页面，则可以创建如下所示的动态路由：
/pages
/[rootPage].js请记住，如果这些页面使用的是静态站点生成，则需要使用getStaticPaths进行声明。
还需要注意的是，预定义的路由优先于动态路由。如果动态路由具有与预定义路由相同的段塞，则Next将始终呈现预定义路由。因此，这种方法在根级是有风险的。
2.单独的路由，一个getStaticProps函数
用例:页面需要类似的数据/API调用，但使用不同的组件
您可以选择为每个页面设置路由，但使用相同的getStaticProps函数。
路线：
/pages
/about-us.js
/terms.jsgetStaticProps辅助函数：
const getPageStaticProps = () => {
return async (context) => {
// generic logic here
}
}页面(about-us.js，terms.js)：
// /pages/about-us.js
function AboutPage(props) {
return <AboutComponent {...props} />
}
export const getStaticProps = getPageStaticProps()
---
// /pages/terms.js
function TermsPage(props) {
return <TermsComponent {...props} />
}
export const getStaticProps = getPageStaticProps()这也可以使用getServerSideProps实现。
我选择了第二种解决方案，因为它感觉更安全，并且仍然受益于在不同页面之间共享代码。显然，还可能有其他解决方案--我们的存在--可以使用:)
https://stackoverflow.com/questions/64701082
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号