NextJS - 如何将此方法转换为 NextJS 页面答案

【问题标题】：NextJS - How to convert this approach to NextJS pagesNextJS - 如何将此方法转换为 NextJS 页面
【发布时间】：2022-01-06 02:44:23
【问题描述】：

我刚开始学习 NextJS。我正在将我的旧项目移至 NextJS。我正在使用react-router-dom，我想知道如何在 NextJS Pages 中执行以下方法？

<Route path={['/','/search/:search?','/top_sold','/recent_added',]} exact component={Home} />
<Route path='/faq/:section?' component={FAQ}  />
<Route path={['/client/:username?/:type?/:search?']} component={Profile} />

感谢您的帮助。

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： reactjs next.js react-router-dom

【解决方案1】：

使用 Next.js，您可以在文件系统中表达相同的应用程序结构。将文件添加到 pages 目录时，它会自动作为路由使用。例如：<Route path='/faq/:section?' component={FAQ} /> 可以在 Next.js 中转换为位置 pages/faq/[[...section]].js 中的文件，具有组件常见问题解答

【讨论】：

【解决方案2】：

在 NextJs 中，只希望将您的文件放在 pages 目录中。不需要其他外部库。如果您的路线是动态的，请在 pages 文件夹中使用 [dynamicRoute].js 文件命名。看看下面的sn-p：

pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username
pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)

更多信息请阅读他们的官方documentation

【讨论】：