react项目中express动态路由未能匹配造成的404问题解决
更新时间：2023年09月19日 09:30:43 作者：kingtopest
本文主要介绍了react项目中express动态路由未能匹配造成的404问题解决,解决了白屏的问题,具有一定的参考价值,感兴趣的可以了解一下
一个react项目打包以后，使用express跑起来，访问首页是可以的，但是只要访问产品详情页，就会白屏，浏览器开发者模式一看：原来是404错误：
看了一下代码和日志，应该是路由没有被匹配上，因为日志根本没有打印该路由信息：
为什么没有匹配上呢？ 对比一下程序里的规则和实际的访问请求路径：
程序定义的路由匹配规则： app.get("/api/:path",xxx)
实际的访问请求路径： /api/touristRoutes/fb6d4f10-79ed-4aff-a915-4ce29dc9c7e1
从这里可以看到：
程序定义的路由匹配规则是两层路由
而实际的访问请求路径是三层路由，第三层路由/fb6d4f10-79ed-4aff-a915-4ce29dc9c7e1实际是作为查询参数的，如以下代码所示：
也就是说两个的路由层级是不一致的！那么必然会出现程序中express无法识别实际访问路径，从而报404错误。
这种情况使用http-proxy中间件比较好。
如果使用express动态路由，就得重新再定义一条/api/touristRoutes/${touristRouteId}的路由规则：
app.get("/api/touristRoutes/[A-Za-z0-9-]+", (req, res) => {
let url = "http://82.157.43.234:8080";
url = url + req.path;
console.log("url is ", url);
axios
.get(url, { params: req.query })
.then((response) => {
res.json(response.data);
})
.catch((e) => {
console.log(e);
});
});总结：express的动态路由定义：如果实际访问路径的路由层级跟express定义路由层级不一致，就会报404！
到此这篇关于react项目中express动态路由未能匹配造成的404问题解决的文章就介绍到这了,更多相关express动态路由未匹配内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于浏览器中视频播放器实现的基本思路与代码,并且详细总结了浏览器中的音视频知识,对大家的理解和学习非常有帮助,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了React 全面解析excel文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家介绍了列表页常见的hook封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了可定制React自动完成搜索组件Turnstone实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
在React函数式组件中，我们可以通过useState()来创建state，这种state创建方式会给我们返回两个东西state和setState()。2023-04-04
本文主要介绍了React实现音频文件上传与试听,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-09-09
react-native ListView下拉刷新上拉加载实现代码
本篇文章主要介绍了react-native ListView下拉刷新上拉加载实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
本文主要介绍了react嵌套路由实现TabBar的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家介绍了React 程序设计简单的轻量级自动完成搜索框应用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了React高级指引中使用PropTypes实现类型检查功能的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
最新评论