0

0

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

心靈之曲

心靈之曲

发布时间:2025-12-26 14:30:20

|

623人浏览过

|

来源于php中文网

原创

如何解决 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 路径完全一致

Songtell
Songtell

Songtell是第一个人工智能生成的歌曲含义库

下载
// ✅ 修正后:路径语义清晰,前后端统一
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()、前端链接、控制器渲染路径三者的一致性,即可快速定位并解决此类问题。

相关文章

路由优化大师
路由优化大师

路由优化大师是一款及简单的路由器设置管理软件,其主要功能是一键设置优化路由、屏广告、防蹭网、路由器全面检测及高级设置等,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
什么是中间件
什么是中间件

中间件是一种软件组件,充当不兼容组件之间的桥梁,提供额外服务,例如集成异构系统、提供常用服务、提高应用程序性能,以及简化应用程序开发。想了解更多中间件的相关内容,可以阅读本专题下面的文章。

175

2024.05.11

Golang 中间件开发与微服务架构
Golang 中间件开发与微服务架构

本专题系统讲解 Golang 在微服务架构中的中间件开发,包括日志处理、限流与熔断、认证与授权、服务监控、API 网关设计等常见中间件功能的实现。通过实战项目,帮助开发者理解如何使用 Go 编写高效、可扩展的中间件组件,并在微服务环境中进行灵活部署与管理。

146

2025.12.18

html版权符号
html版权符号

html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

586

2023.06.14

html在线编辑器
html在线编辑器

html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。

637

2023.06.21

html网页制作
html网页制作

html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。

457

2023.07.31

html空格
html空格

html空格是一种用于在网页中添加间隔和对齐文本的特殊字符,被用于在网页中插入额外的空间,以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容,供大家免费下载体验。

240

2023.08.01

html是什么
html是什么

HTML是一种标准标记语言,用于创建和呈现网页的结构和内容,是互联网发展的基石,为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。

2847

2023.08.11

html字体大小怎么设置
html字体大小怎么设置

在网页设计中,字体大小的选择是至关重要的。合理的字体大小不仅可以提升网页的可读性,还能够影响用户对网页整体布局的感知。php中文网将介绍一些常用的方法和技巧,帮助您在HTML中设置合适的字体大小。

500

2023.08.11

虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

25

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.6万人学习

AngularJS教程
AngularJS教程

共24课时 | 2万人学习

CSS教程
CSS教程

共754课时 | 16.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号