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如何通过useContext特性实现组件数据传递，文中有相关的代码示例供大家参考，对我们学习React有一定的帮助,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了React中嵌套组件与被嵌套组件的通信过程，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了React事件处理过程中传参的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
React报错Element type is invalid解决案例
这篇文章主要为大家介绍了React报错Element type is invalid解决案例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了create-react-app构建项目慢的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了React.js组件实现拖拽排序组件功能过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了React+Antd实现可增删改表格的示例，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
本文主要介绍了React组件二次包装的具体实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
我正在处理的组件是表单的时间输入。表单相对复杂，并且是动态生成的，根据嵌套在其他数据中的数据显示不同的字段。我正在用useReducer管理表单的状态，到目前为止效果很好2022-11-11
这篇文章主要介绍了react应用中的DOM DIFF算法，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下2021-04-04
最新评论