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

Question

我刚开始学习NextJS。我要把我的旧项目搬到NextJS。我正在使用react-router-dom，我想知道如何在NextJS页面中执行以下方法？

<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} />

谢谢你的帮助。

Answer 1

Next.Js使用基于页面概念的基于文件系统的路由器.

索引路由

路由器将自动将名为index的文件路由到目录的根目录。

pages/index.js → /
pages/blog/index.js → /blog

嵌套路由

路由器支持嵌套文件。如果您创建一个嵌套文件夹结构，文件将自动以相同的方式路由仍然。

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)

从这里了解更多信息

Answer 2

使用Next.js，您可以在文件系统中表示相同的应用程序结构。当一个文件被添加到页面目录中时，它作为路由自动可用。例：<Route path='/faq/:section?' component={FAQ} />可以在Next.js中转换为文件，在具有组件FAQ的位置pages/faq/[[...section]].js

想了解更多细节

https://nextjs.org/docs/migrating/from-react-router

Answer 3

在NextJ中，它只需要将文件放在pages目录中。不需要其他外部库。如果您的路由是动态的，请在pages文件夹中使用dynamicRoute.js文件命名。请看下面的片段：

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)

欲了解更多信息，请阅读他们的官方文档