react 打包后,项目部署完毕,刷新页面报错(404)

简介: react 打包后,项目部署完毕,刷新页面报错(404)

原因解析:


之所以你在浏览器内可以由首页跳转到其他路由地址,是因为这是由前端自行渲染的,你在React Router定义了对应的路由,脚本并没有刷新网页访问后台,是JS动态更改了location。


当你刷新时,你首先是访问的后台地址,然后返回的页面内加载了React代码,最后在浏览器内执行;也就是说如果这个时候报404,是因为你后台并没有针对这个路由给出返回HTML内容,也谈不上执行React Router了。


解决方案一:


如果你期望所有的路由都由React Router来定义,只有你的后台,无论任何路径,都返回index.html就好了。剩下的事情交给React Router。那么你要做的就是修改后台服务器,可以放在apache,也可以放在你的java路由内做一个通配路径处理。


解决方案二:


关键点是要明白客户端路由和服务端路由的区别。服务端路由,不同的服务器配置的方式不同,另外一种简单的解决方法,使用HashRouter,不要使用BrowserRouter,这样所有的请求都会定位到index.html这一个页面,服务器端也不需要任何配置了。

import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
#改为
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom';

就是把 BrowserRouter改成HashRouter即可。

目录
相关文章
|
6月前
|
JavaScript 前端开发 应用服务中间件
Vue项目如何进行部署?是否有遇到部署服务器后刷新404问题?
Vue项目如何进行部署?是否有遇到部署服务器后刷新404问题?
202 0
|
JavaScript
VUE框架搭建时,npm 下载项目资源时卡死
VUE框架搭建时,npm 下载项目资源时卡死采用cnpm 等方式
359 0
|
2月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
229 1
|
前端开发 JavaScript 数据可视化
Vue项目打包完后如何自动上传至服务器
Vue项目打包完后如何自动上传至服务器
1262 0
Vue项目打包完后如何自动上传至服务器
|
3月前
|
缓存 JavaScript 前端开发
三分钟,带你学会 Vue3 加载远程组件
三分钟,带你学会 Vue3 加载远程组件
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的网上宠物店系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的网上宠物店系统附带文章源码部署视频讲解等
52 15
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的学习资源推送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的学习资源推送系统附带文章源码部署视频讲解等
38 0
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的作业提交与查收系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的作业提交与查收系统附带文章和源代码部署视频讲解等
38 1
|
前端开发
React项目的打包步骤
React项目的打包步骤
436 0
|
前端开发 JavaScript Java
react 打包后,项目部署完毕,刷新页面报错(404)
react 打包后,项目部署完毕,刷新页面报错(404)
436 0