Express路由异常：/log-in等路径均显示注册页面，求解决方法

嘿，我来帮你搞定这个Express的路由问题！

问题根源 #

你现在的代码里把两个静态资源文件夹（sign-in/public和log-in/public）都直接挂载在了根路径/下，而Express的中间件是按顺序从上到下执行的，这就导致了几个冲突：

1. 访问根路径localhost:8081时，Express会优先在第一个静态文件夹sign-in/public里找index.html，直接返回注册页面。
2. 访问/log-in时，如果第一个静态文件夹里刚好有和/log-in匹配的文件/文件夹（比如误建了sign-in/public/log-in目录），Express会直接返回里面的内容；就算没有，也可能因为静态中间件的优先级，导致你的路由没有被正确触发，最终还是返回了第一个静态文件夹的index.html。
3. 访问/sign-up这种未定义的路径时，因为没有对应的路由，Express会遍历所有静态中间件找匹配文件，找不到的话就会返回第一个静态文件夹的index.html（这是部分静态服务的默认兜底行为）。

修复方案 #

我们只需要调整静态资源的挂载方式，让它们和路由路径一一对应，就能解决冲突：

1. 给静态资源指定挂载路径

把静态文件夹分别挂载到/sign-in和/log-in路径下，这样两个文件夹的资源就不会在根路径打架了：

// 注册页的静态资源只在/sign-in路径下生效
app.use("/sign-in", express.static(__dirname + "/sign-in/public"))
// 登录页的静态资源只在/log-in路径下生效
app.use("/log-in", express.static(__dirname + "/log-in/public"))

2. 优化路由（可选）

其实当你把静态资源挂载到对应路径后，访问/sign-in时，Express会自动返回sign-in/public/index.html，所以你可以简化路由，甚至省略原有的/sign-in和/log-in路由。另外，给根路径加个重定向，引导用户到注册或登录页：

// 根路径自动跳转到注册页
app.get("/", (req, res) => res.redirect("/sign-in"))

3. 处理404页面（可选）

为了避免访问不存在的路径时返回注册页，可以添加一个兜底路由：

app.get("*", (req, res) => {
  res.status(404).send("哎呀，页面找不到啦！");
  // 也可以重定向到首页：res.redirect("/")
})

完整修复后的代码 #

const express = require("express"),
      app = express(),
      server = require("http").Server(app),
      io = require("socket.io")(server);

// 挂载静态资源到对应路由路径
app.use("/sign-in", express.static(__dirname + "/sign-in/public"));
app.use("/log-in", express.static(__dirname + "/log-in/public"));

// 根路径重定向到注册页
app.get("/", (req, res) => res.redirect("/sign-in"));

// 可选：如果需要自定义页面返回逻辑，可以保留以下路由，否则静态中间件会自动处理
// app.get("/sign-in", (req, res) => res.sendFile(__dirname + "/sign-in/public/index.html"));
// app.get("/log-in", (req, res) => res.sendFile(__dirname + "/log-in/public/index.html"));

// 404兜底处理
app.get("*", (req, res) => res.status(404).send("哎呀，页面找不到啦！"));

server.listen(8081, () => console.log(`Listening on ${server.address().port}`));

修复后的效果 #

• 访问localhost:8081 → 自动跳转到/sign-in，显示注册页面
• 访问localhost:8081/log-in → 正常显示登录页面
• 访问localhost:8081/sign-up → 显示404提示（或你设置的其他内容）

内容的提问来源于stack exchange，提问作者demo