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特征学习之Form格式示例详解

    React特征学习之Form格式示例详解

    这篇文章主要为大家介绍了React特征学习之Form格式示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 解决配置setupProxy.js代理,页面报错404问题

    解决配置setupProxy.js代理,页面报错404问题

    这篇文章主要介绍了解决配置setupProxy.js代理,页面报错404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • react数据管理机制React.Context源码解析

    react数据管理机制React.Context源码解析

    这篇文章主要为大家介绍了react数据管理机制React.Context源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 想用好React的你必须要知道的一些事情

    想用好React的你必须要知道的一些事情

    现在最热门的前端框架,毫无疑问是 React 。下面这篇文章主要给大家分享了关于想用好React的你必须要知道的一些事情,文中介绍的非常详细,对大家具有一定参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • React实现文件上传和断点续传功能的示例代码

    React实现文件上传和断点续传功能的示例代码

    这篇文章主要为大家详细介绍了React实现文件上传和断点续传功能的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • Ant Design组件库的使用教程

    Ant Design组件库的使用教程

    AntDesign ,简称antd是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品,这篇文章主要介绍了Ant Design组件库的使用教程,需要的朋友可以参考下
    2023-12-12
  • 在create-react-app中使用css modules的示例代码

    在create-react-app中使用css modules的示例代码

    这篇文章主要介绍了在create-react-app中使用css modules的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • React使用UI(Ant Design)框架的详细过程

    React使用UI(Ant Design)框架的详细过程

    Ant Design主要用于中后台系统的使用,它提供了丰富的组件和工具,可以帮助开发人员快速构建出美观、易用的界面,同时,Ant Design还提供了详细的文档和示例,方便开发者学习和使用,这篇文章主要介绍了React使用UI(Ant Design)框架,需要的朋友可以参考下
    2023-12-12
  • 从零搭建react+ts组件库(封装antd)的详细过程

    从零搭建react+ts组件库(封装antd)的详细过程

    这篇文章主要介绍了从零搭建react+ts组件库(封装antd),实际上,代码开发过程中,还有很多可以辅助开发的模块、流程,本文所搭建的整个项目,我都按照文章一步一步进行了git提交,开发小伙伴可以边阅读文章边对照git提交一步一步来看
    2022-05-05
  • react中常见hook的使用方式

    react中常见hook的使用方式

    这篇文章主要介绍了react中常见hook的使用方式与区别,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下
    2021-04-04

最新评论