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即可。

相关文章
|
3天前
|
前端开发 JavaScript UED
react实现分片打包
react实现分片打包
38 0
|
3天前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
53 0
|
2天前
|
JavaScript 前端开发
vue3中使用jsx报错React is not defined和h is not defined
vue3中使用jsx报错React is not defined和h is not defined
|
3天前
|
前端开发 JavaScript Linux
relectron框架——打包前端vue3、react为pc端exe可执行程序
relectron框架——打包前端vue3、react为pc端exe可执行程序
32 1
|
3天前
|
移动开发 JavaScript 前端开发
vue/react项目刷新页面出现404的原因以及解决办法
vue/react项目刷新页面出现404的原因以及解决办法
231 0
|
3天前
react+typescript装饰器写法报错的解决办法
react+typescript装饰器写法报错的解决办法
24 1
|
3天前
|
JavaScript 前端开发 Java
React-Native Android打包
React-Native Android打包
32 0
|
3天前
|
移动开发 JavaScript 前端开发
React-Native iOS打包
React-Native iOS打包
22 0
|
3天前
|
前端开发 安全 Linux
React Native 打包 App 发布 iOS 及加固混淆过程
本文将介绍如何使用 React Native 打包并发布 iOS 应用到 App Store,并介绍了如何进行应用的加固和混淆过程。
|
3天前
|
Web App开发 前端开发 JavaScript
React项目中发生空白但不报错的原因分析和解决?
React项目中发生空白但不报错的原因分析和解决?
46 0

热门文章

最新文章