React-Router做路由,打包出来的静态文件丢到Tomcat里路由不生效,刷新页面404两个错误

URL是MVC的神经中枢:从路由设计到生产级实践 URL不仅是资源定位符,更是Web系统中控制流、数据流与用户体验流的核心契约。其本质是HTTP协议下路径、查询参数与请求体的职责划分机制,直接关联MVC架构中Controller的调度逻辑、Model的数据边界和View的渲染上下文。遵循RESTful语义可实现天然解耦,而路径参数、查询参数与请求体的合理使用,决定了缓存策略、SEO效果、安全防护与监控粒度。现代框架如Spring Boot、Express及Vue Router均围绕URL构建路由匹配引擎(如Trie树)与解析规范(如多层解码),使其成为可观 阅读详情

 有些开发er可能会想把做好的react项目,打包出来的静态文件丢到tomcat上测试,然后发现自己的路由怎么不生效了?? 页面不进行加载了。

 第二个就是但是当我们刷新一下浏览器,或者打开一个不存在的页面的时候

  • 路由不加载(都是路径惹的祸) 

首先,看一下自己的本地路径是不是这个样子的: http://localhost:8888/home

然而丢到tomcat的webapp下,由于自己新建了文件夹(我的是叫react),路径变成了http://localhost:8080/react/home

多出的文件夹路径(react)就是罪魁祸首!

解决方式:在route组件的path添加你的文件夹名字就可以了

比如我用webpack开发的时候是这样子的(注意route组件的path就行)

<Route exact  path="/" render={()=>   
  <Redirect to="/home"/>               
  // <Home dispatch={dispatch} getState={getState} questionList={value.question}></Home>
}/>
<Route path="/home" render={()=>{
  return lazyLoad(Home, {
      dispatch:dispatch,
      getState:getState,
      questionList:value.question
    }
  );
}}/>                         
<Route path="/detail" render={(props)=>{
  return lazyLoad(Detail, {
              pid:props.location.id,
              questionList:value.question,
              dispatch:dispatch,
              answer:value.answer
          }
        );
}}/>
 丢到tomcat修改成

<Route exact  path="/react" render={()=>   
  <Redirect to="/react/home"/>               
  // <Home dispatch={dispatch} getState={getState} questionList={value.question}></Home>
}/>
<Route path="/react/home" render={()=>{
  return lazyLoad(Home, {
      dispatch:dispatch,
      getState:getState,
      questionList:value.question
    }
  );
}}/>                         
<Route path="/react/detail" render={(props)=>{
  return lazyLoad(Detail, {
              pid:props.location.id,
              questionList:value.question,
              dispatch:dispatch,
              answer:value.answer
          }
        );
}}/>

  • 页面刷新404

在WEB-INF文件夹的web.xml中添加下面代码就行了(没有文件夹和文件自己添加)

<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>






Nginx部署前后端分离项目:Vue+SpringBoot实战配置详解 在Web开发领域,前后端分离架构已成为主流模式,其核心在于将用户界面与业务逻辑解耦,通过API进行通信。这种架构的原理是前端负责视图渲染和用户交互,后端专注于数据处理和业务逻辑,两者独立开发、部署。其技术价值在于提升开发效率、增强系统可维护性,并支持技术栈的灵活选型。典型的应用场景包括企业级管理系统、电商平台和内容展示网站等。在实际部署中,如何高效、稳定地整合前后端服务是关键挑战。Nginx作为高性能的Web服务器和反向代理,在其中扮演了至关重要的角色。通过配置Nginx,可以轻松实现静态资源托管、API请 阅读详情

相关推荐

DeepSeek 4 Pro与GPT-5.5全栈实战对比:WebSocket+React+SpringBoot流式响应压测

WebSocket是一种基于TCP的全双工通信协议,其低开销、长连接特性使其成为实时AI对话场景的工程首选;而流式响应(Streaming Response)则是大模型API交付体验的核心技术,直接影响首token延迟(TTFT)与每秒生成令牌数(TPS)。在React前端需应对碎片化delta数据渲染、AbortController中断控制与跨域鉴权等挑战,在SpringBoot后端则涉及SseEmitter生命周期管理、WebSocketSession状态同步及模型协议适配(如DeepSeek的NDJS

dflkg8956的专栏 414

通过create-react-app创建的react项目,build以后,在tomcat中部署配置

最近一直做react项目,但是老版本是java的,新版本是react,因为项目没有整体移植,因此,就出现了javaweb和react共存的情况。说说我的操作方式:1,先build项目。2,上传build后的项目内容到webapps文件夹中的ROOT中,ROOT原有文件全部删除。我的目的是要在根目录访问,因此要用到ROOT文件夹。如果和我的不一样的,需要配置一下路由啦。3,单纯这样,可能在访问时会出...

佛缘的技术专栏 5541

Ubuntu 22.04下Nginx Web Root迁移实战:绕过AppArmor与权限陷阱

Nginx的document root(文档根目录)是Web服务响应静态资源的核心路径,其配置本质涉及请求URI解析、文件系统访问控制与安全模块协同。在Ubuntu 22.04中,该操作不再仅是修改root指令,而是触发AppArmor策略校验、www-data用户权限链验证及location匹配逻辑重构的技术闭环。理解root与alias的语义差异、掌握/srv/www/路径的FHS合规性优势、识别403错误背后AppArmor拒绝日志与父目录x权限缺失的双重成因,是保障静态资源正确加载与PHP/前端路由

407

277/300 React+react-router-dom+Vite 二级页面刷新时,白屏问题解决

BrowserRouter 换为 HashRouter。

xinghuowuzhao的博客 1453

SpringBoot+Vue全栈开发英语学习平台实战

全栈开发结合了前端与后端技术,通过模块化设计实现高效协作。SpringBoot作为主流Java框架,提供自动配置和快速启动能力,简化后端开发;Vue.js则以其响应式特性和组件化优势提升前端交互体验。这种技术组合特别适合构建教育类管理系统,能有效整合学习资源并实现知识系统化管理。项目中采用JWT认证、RBAC权限控制和RESTful API设计,确保系统安全性和可扩展性。通过MySQL全文检索和Redis缓存优化,系统能高效处理知识内容管理和学习进度跟踪等核心功能,为中小型教育机构提供完整的数字化解决方案。

weixin_30535843的博客 416

benders分解算法 逻辑思路整理(加星)

一般我们经常可以看到的是经典的benders,此处我也结合经典的benders梳理下思路。

sinat_41348401的博客 7986

react 嵌套路由的子路由页面,刷新报错;正常从父级跳入不报错

1.场景: 2.原因: 01:主文件index.html中的 js 引入路径写为绝对路径导致; 02:引入的某一js文件地址出错,需要一个个检查;

weixin_40532650的博客 661

HDMI与DisplayPort混搭方案:如何用Xilinx Video PHY Controller实现多协议视频接口转换

本文详细解析了如何利用Xilinx Video PHY Controller IP核实现HDMI与DisplayPort协议转换,涵盖混合视频接口架构设计、GT收发器动态重配置策略及跨协议时钟域处理方案。通过实战案例和配置技巧,帮助开发者构建高性能多协议视频转换系统,适用于医疗影像、工业控制等场景。

weixin_30776273的博客 447

tomcat部署react前端项目(放到ROOT文件夹内)

一、安装tomcat https://tomcat.apache.org/ 配置环境 JAVA_HOME:环境变量,并且配置到jdk的目录 配置完成之后,找到tomcat的bin文件夹里的startup.bat,双击之后运行,会出现小黑框(不要关闭,关闭相当于关掉tomcat) 浏览器访问http://localhost:8080 或者 http://127.0.0.1:8080/localhost,如果出现页面证明启动成功 二、react 项目打包,得到build文件夹

续得木槿的博客 1712

workbench谐响应

定义材料 打开Engineering Data定义材料,在分析时不同部分选择不同材料 建模 打开Geometry建模,我举的例子很简单就一根光秃秃的轴 因为要加轴承,在轴上创建imprint face 因为要用point mass代替轴上原来的盘,在轴上盘的位置新建一个Plane,用Slice方法将轴从XYPlane3分成两段 施加边界条件以及谐响应分析 打开Model 1.在两段轴的交界面处,创建Point Mass,输入质量与转动惯量,位置在轴线上 2.mass point promote to.

my blogs include programming, math, physics.回首过去,放眼未来。 leslielee.blog.youkuaiyun.com 5885

Python爬虫:抓取餐饮平台顾客评分与评价的完整教程

本文介绍了如何使用Python爬虫技术抓取餐饮平台上的餐厅评分和评论数据。我们通过三种主要的抓取方法:静态网页抓取(requests)、动态网页抓取(Selenium)和API抓取,展示了如何抓取餐饮平台的数据。还介绍了如何使用pandas对抓取的数据进行存储、清洗、分析,并进行可视化和情感分析。通过本文的学习,您应该能够掌握如何使用Python爬虫抓取餐饮平台的评论数据,并将这些数据应用于市场分析、顾客反馈和服务优化等领域。

2201_76125261的博客 1144

react多项目多模块运行/打包

react多项目多模块运行/打包,react17 为例,实现多项目的分模块打包。多项目之间共享组件和依赖,运行、打包互不干扰。

真正改变命运的,并不是机遇,而是我们的态度! 3686

基于深度学习的行人车辆检测与计数系统(UI界面+YOLOv8/v7/v6/v5代码+训练数据集)

从YOLOv1到最新的YOLOv8,其网络结构、训练策略和损失函数不断优化,性能持续提升。image_path, _ = QFileDialog.getOpenFileName(self, "选择图片文件", "", "Image Files (*.jpg *.png *.jpeg *.bmp)")video_path, _ = QFileDialog.getOpenFileName(self, "选择视频文件", "", "Video Files (*.mp4 *.avi *.mov *.mkv)")

YOLO 226

React-Router与Tomcat

当前端用React-Router做路由的时候,打包出来的静态文件丢到Tomcat里面是可以直接访问的,但是当我们刷新一下浏览器,或者打开一个不存在的页面的时候,就会发现前端界面鬼畜了。。。。今天看了一下react-router的路由方式,想了想,刷新的时候,咦,不就是找不到url上面指定的页面嘛,404的时候转回index就完事了,React-Router的history会帮我定位回去的那么,找到c

小埋的博客 4812

ZW3D 二次开发-制作插件

1.Windows 7 SP1 或 Windows 10 或 Windows 11(推荐 Windows 11)2.Visual studio 2017-2022 (或 C/C++的任何其他集成开发环境)(推荐 Visual studio 2022)3.ZW3D 2023 或以上版本(建议使用与 ZW3D 一致的 API 的版本)4.Qt5.9.7(for Windows)博主学习使用环境的是:Windows 11 Version 24H2 + Visual studio 2022 + Qt5.9.7(fo

fhqiwmc的博客 812

Response Instance 详解:在 ABAP OData Client Proxy 中读懂每一次响应

ABAP OData Client Proxy中的Response Instance是关键信息载体,封装了业务数据及调用上下文(如分页、delta link等)。响应实例在执行请求后自动生成,根据请求类型返回特定接口(如READ返回/IWBEP/IF_CP_RESPONSE_READ)。响应抽象与OData版本解耦,支持统一处理V2/V4服务。常见响应类型包括单实体读取、列表读取(支持分页和增量同步)、创建/更新/删除响应等。开发时可通过响应对象的安全类型方法获取数据,如get_business_data获

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 137

Tomcat部署Vue.js 访问报404

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34297300的博客 1259

fast-lio运行步骤(使用velodyne数据)

使用fast-lio运行velodyne数据

ericdowney 4769

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

React 使用browserHistory项目访问404问题

最近项目里面用到了React但是发布到iis站点之后,路由地址 刷新访问直接404错误。查阅资料之后发现是iis缺少配置URL重写 的问题导致的。下面我们来图形化配置,简单的配置下IIS 打开IIS使用 Web平台安装程序 搜索url关键字,您会看到 直接安装 关掉IIS 重新打开IIS在站点右边的控制面板可以看到一个URL重写的功能 新增配置如下 也可以直接 使用我的配置 配置...

dfk75289的博客 438

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

MERN全栈开发实战:从环境搭建到部署的完整闭环

MERN栈是以JavaScript为核心、JSON为统一数据格式的现代Web全栈开发范式,涵盖MongoDB(文档型数据库)、Express(轻量级Web框架)、React(声明式UI库)和Node.js(服务端运行时)。其核心原理在于前后端共享语言与数据模型,消除序列化/反序列化开销,显著缩短开发反馈回路。技术价值体现在降低全栈学习门槛、加速MVP验证、提升小团队协作效率。典型应用场景包括内部管理系统、内容展示平台、电商原型及高校课程设计项目。本文聚焦Windows本地环境搭建、跨域联调、MongoDB文

深未来技术 467

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

3小时搭建SpringBoot+Vue3后台管理系统:从环境配置到简历项目实战

在软件开发领域,前后端分离架构已成为构建现代Web应用的主流模式,其核心原理是将用户界面与业务逻辑解耦,通过API进行通信。这种架构模式的技术价值在于提升了开发效率、便于团队协作,并增强了系统的可维护性和可扩展性。在实际工程实践中,SpringBoot作为Java后端开发的利器,以其快速启动和自动配置特性,极大地简化了服务端开发;而Vue3作为前端主流框架,凭借其响应式系统和组合式API,为构建交互式用户界面提供了高效方案。一个典型的应用场景便是企业级后台管理系统,它通常需要实现用户管理、数据展示与操作等核

congsikuai0611的博客 389

Web项目线上部署全流程:从静态站点到Spring Boot生产环境

Web项目部署是将本地可运行代码转化为公网可用服务的关键工程实践,其本质涉及环境隔离、进程管理、反向代理与安全加固等核心原理。技术价值在于保障服务高可用、低延迟与零信任安全,支撑个人博客、企业中台及SaaS应用等多样化场景。本文聚焦前后端分离架构下的真实落地路径,深入解析Nginx静态托管、Vue Router history模式兜底、Spring Boot JAR的systemd服务化、JVM内存调优及HTTPS自动续签等硬核细节,覆盖学生快速上线、初级工程师理解原理、资深从业者规避坑点的全阶段需求。

290

基于SSM+Vue的社区门诊管理系统:从架构设计到性能优化实战

在医疗信息化领域,管理系统是提升基层医疗机构运营效率的核心工具。其技术原理通常围绕前后端分离架构展开,后端负责业务逻辑与数据持久化,前端负责用户交互与数据展示。这种架构的技术价值在于解耦开发、提升可维护性,并能更好地应对复杂业务流程。在应用场景上,尤其适合社区门诊这类需要处理患者流、药品流和财务流等多重实体的业务环境。本文以电子处方与库存联动、基于RBAC的动态权限控制等关键模块为例,深入探讨了如何利用SSM框架的事务管理与MyBatis的SQL优化能力,结合Vue.js的组件化开发,构建一个稳定、高效且贴

weixin_33834628的博客 363
上一篇: 阿里云windows开放tomcat 8080端口(修改防火墙规则)
下一篇: webpack3构建生产和开发环境分离
Qssn丶
博客等级 码龄11年 88粉丝 113原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值