如何解决 Express.js 中子页面路由 404 错误问题

12次阅读

如何解决 Express.js 中子页面路由 404 错误问题

express 应用中子页面返回 404 的常见原因是 `app.use()` 注册的挂载路径与 前端 导航链接不一致,导致请求无法匹配到对应 路由器——本文将通过实际案例详解定位与修复方法。

在使用 Express 构建多页面网站时,一个典型且容易被忽视的错误是:路由 器挂载路径(mount path)与前端 链接的 href 值不一致。这会导致看似结构相同的路由逻辑,却出现部分页面 404、部分正常的现象。

从你的日志可以清晰看出问题所在:

GET /sprzet     200 → 正常响应   GET /zamowienia 404 → 路由未匹配   GET /wysylka    404 → 路由未匹配

而关键线索藏在 app.js 的路由注册段:

app.use('/sprzet', sprzetRouter);      // ✅ 挂载在 /sprzet   app.use('/list-wys', wysylkaRouter);   // ❌ 但前端链接是 /wysylka   app.use('/list', zamowieniaRouter);    // ❌ 但前端链接是 /zamowienia

此时,即使 wysylkaRoute.js 中定义了 router.get(‘/’, …),它实际响应的完整路径是 /list-wys/,而非 /wysylka/;同理,/list 路由只响应 /list 开头的请求,与 完全不匹配。

✅ 正确做法是:让 app.use() 的第一个参数(即挂载路径)与用户访问的 URL 路径完全一致

// ✅ 修正后:路径语义清晰,前后端统一 app.use('/', indexRouter); app.use('/sprzet', sprzetRouter); app.use('/wysylka', wysylkaRouter);     // ← 现在访问 /wysylka 就能命中 app.use('/zamowienia', zamowieniaRouter); // ← 同理,/zamowienia 可达

同时,请确保对应路由器文件(如 zamowieniaRoute.js)结构正确,例如:

// routes/zamowieniaRoute.js const express = require('express'); const router = express.Router(); const zamowieniaController = require('../controllers/zamowieniaController');  router.get('/', zamowieniaController.showZamowieniaList); router.get('/add', zamowieniaController.showAddZamowieniaForm); router.get('/details/:id', zamowieniaController.showZamowieniaDetails);  module.exports = router;

⚠️ 注意事项:

  • 挂载路径(app.use(‘/xxx’, router))必须与 HTML 中 的路径严格一致
  • 不要混淆“挂载路径”和“内部路由路径”:app.use(‘/wysylka’, router) + router.get(‘/add’) = 完整路径 /wysylka/add;
  • 使用 express.static() 提供静态资源时,路径优先级高于动态路由,但本例中 404 明确来自路由层,非静态资源问题;
  • 开发时可添加调试中间件快速验证路由是否被调用:
app.use('/wysylka', (req, res, next) => {console.log('[DEBUG] /wysylka route hit:', req.method, req.url);   next();}, wysylkaRouter);

总结:Express 的路由匹配是精确的字符串前缀匹配。修复 404 子页面的核心在于 对齐挂载路径与用户可见 URL。检查 app.use()、前端链接、控制器渲染路径三者的一致性,即可快速定位并解决此类问题。

text=ZqhQzanResources