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 Native使用百度Echarts显示图表的示例代码
本篇文章主要介绍了React Native使用百度Echarts显示图表的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
React中并没有vue中的 slot 插槽概念 不过 可以通过props.children 实现类似功能，本文为大家整理了实现的具体方，需要的可以参考一下2023-07-07
这篇文章主要给大家介绍了React三种避免子组件无效刷新的解决方案,使用React.memo,使用React.useMemo或React.useCallback,将子组件作为children来传递这三种方案,文章通过代码介绍的非常详细,需要的朋友可以参考下2023-08-08
相信很多小伙伴们都一直在疑惑，setState 到底是同步还是异步。本文就详细的介绍一下React中setState同步或异步问题，感兴趣的可以了解一下2021-11-11
antd中form表单的wrapperCol和labelCol问题详解
最近学习中遇到了些问题,所以给大家总结,下面这篇文章主要给大家介绍了关于antd中form表单的wrapperCol和labelCol问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了React如何接收excel文件下载导出功能封装，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了浅谈React高阶组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
ReactNative错误采集原理在Android中实现详解
这篇文章主要为大家介绍了ReactNative错误采集原理在Android中实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
React中useCallback useMemo到底该怎么用
在React函数组件中，当组件中的props发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改values/props的函数/组件。在react中，我们可以通过memo，useMemo以及useCallback来防止子组件的rerender2023-02-02
React是用于构建用户界面的JavaScript库， 起源于Facebook的内部项目，这篇文章主要介绍了react如何快速设置文件路径别名,需要的朋友可以参考下2021-04-04
最新评论