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动态路由未匹配内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
详解如何使用React和MUI创建多选Checkbox树组件
这篇文章主要为大家详细介绍了如何使用 React 和 MUI（Material-UI）库来创建一个多选 Checkbox 树组件,该组件可以用于展示树形结构的数据,并允许用户选择多个节点,感兴趣的可以了解下2024-01-01
electron其实是一个桌面应用程序，不是一个标准的前端web程序，所有没有什么请求的发生，控制台network看不到请求，而是只能通过console.log去打印查看，而且通信协议使用的不是http而是gRPC协议，这篇文章主要介绍了Electron+React如何进行通信,需要的朋友可以参考下2022-06-06
本篇文章主要介绍了webpack 2.x配置reactjs基本开发环境详解，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
众所周知，react推出了hooks之后，很多项目就开始往hooks上靠拢，所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西2021-06-06
这篇文章主要介绍了React ref的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
react-router-dom6(对比 router5)快速入门指南
这篇文章主要介绍了快速上手react-router-dom6（对比 router5）,通过本文学习最新的react-router-dom v6版本的路由知识，并且会与v5老版本进行一些对比，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了react 父子组件之间通讯props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了react新版本生命周期钩子函数及用法详解,本文通过示例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
本文主要介绍了React项目中动态插入HTML内容的实现,通过使用React的dangerouslySetInnerHTML属性,我们可以将HTML内容插入到组件中,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了React状态提升案例，所谓 状态提升 就是将各个子组件的 公共state 提升到它们的父组件进行统一存储、处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
最新评论