Express NextJS：如何在根目录下处理多个动态路由

目标：我想实现github风格的路由，其中

github.com/abcd

中的

abcd

可以解析为用户配置文件页面或团队页面

我目前有一个类似的版本（见下文）。不幸的是，当我在两条动态路线之间导航时，偶尔会出现白页闪烁

我的服务器文件看起来像：

const express=require（'express'）；
const next=需要（“next”）；
const{parse}=require（'url'）；
const resolveRoute=require（'./resolveRoute'）；
const port=parseInt（process.env.port，10）| 3000；
const dev=process.env.NODE_env！='生产",；
const nextap=下一个({
德夫，
});
const nextHandle=nextap.getRequestHandler（）；
常量静态路由=[
“/关于”，
“/新闻”，
“/static”，
];
常量动态路径地图={
用户：'/[用户]'，
团队：'/teams/[team]'，
};
nextap.prepare（）。然后（（）=>{
const server=express（）；
server.get（'*'，异步（req，res）=>{
//通过下一条路线
if（请求url.indexOf（'/_next'）==0）{
下一步返回（请求、回复）；
}
//通过静态路径
如果(
请求url=='/'||
静态路由.map（路由=>req.url.indexOf（路由）==0）。减少(
（上一个，当前）=>上一个| |当前，
)
) {
下一步返回（请求、回复）；
}
//尝试解决路线问题
//如果成功解析为对象：
//{键入：“用户”|“团队”}
const ResolvedLote=等待resolveRoute（请求url）；
如果（！ResolveDroote | |！ResolveDroote.type）{
console.error（“Next.JS”内置了动态路由，不需要您创建自定义的server.JS文件。如果您希望与Next.JS完全兼容，应该使用它的动态路由

要在Next.JS中创建动态路由，您可以创建名称用方括号括起来的页面，例如
/pages/[username].JS
。这将匹配基本域上的所有路由，因此您可以使用github设置您提到的示例，例如和

在上面的示例中，您可以从
getInitialProps
中的查询参数中获取Next.JS页面中的用户名，方法与使用任何查询字符串参数相同：

static getInitialProps({query}) {
  console.log(query.username); // the param name is the part in [] in your filename
  return {query}; // you can now access this as this.props.query in your page
}

Next.JS总是在动态路由之前匹配静态路由，这意味着您的
/pages/
目录可以如下所示：

pages/index.js       -> (will match http://yourwebsite.com)
pages/about.js       -> (will match http://yourwebsite.com/about)
pages/contact.js     -> (will match http://yourwebsite.com/contact)
pages/[username].js  -> (will match http://yourwebsite.com/[anything_else])

多段
您可以有多段动态路由，例如
http://website.com/[用户名]/[repo]
使用
页面中的文件夹
目录：

pages/[username].js      -> (matches http://yourwebsite.com/[username])
pages/[username]/[repo]  -> (matches http://yourwebsite.com/[username]/[repo])

在本例中，查询对象将包含2个参数：
{username:…，repo:…}

路由“前缀”
如果愿意，您可以在
页面
目录中创建文件夹，从而拥有具有不同“前缀”的多个动态路由。下面是一个文件夹结构示例，其中包含
网站.com/[username]
路由和
网站.com/teams/[teams]
路由：


不同区段的动态数量
您还可以具有任意数量的动态段的动态路由。为此，您需要在动态路由文件名中使用省略号（“…”）：

/pages/[...userDetails].js  -> (will match http://website.com/[username]/[repo]/[etc]/[etc]/[forever]) 

在本例中，您的
this.props.userDetails
变量将返回一个数组而不是字符串。
对，问题是我需要两个动态路由，
/pages/[username].js
和
/pages/[team].js
，这不起作用（可以理解）。在您的问题中，您的“团队”路由是
http://website.com/teams/[团队名称]
所以你可以在NextJS中这样做没有问题。只需在你的页面目录中放置一个名为
teams
的文件夹，这样你就有了
/pages/[username].js
和
pages/teams/[team].js
。这应该可以：）我刚刚测试了它的工作原理。这是我的文件夹结构：我还编辑了我的主要帖子，其中有一个更新，显示了如何实现包含动态段数的动态路由（如果感兴趣的话）：）啊，然后你需要在你的页面代码中处理这个问题。例如，抓取字符串，找出它是团队还是用户，然后导入正确的组件来显示正确的页面。