原因解析:

之所以你在浏览器内可以由首页跳转到其他路由地址,是因为这是由前端自行渲染的,你在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即可。

react 打包后,项目部署完毕,刷新页面报错(404)的更多相关文章

  1. angular4.0项目build发布后,刷新页面报错404

    angular4.0项目执行npm run build后,进入页面正常显示. 但是当刷新页面时,报错404,页面未找到. 出现这个问题的原因,应该是找不到路由地址导致的,然后找到了下面的解决方案. 找 ...

  2. 解决Vue项目打包之后放到nginx下刷新就报错404的问题

    最近跟着某机构的教学视频敲了一遍vue项目,但是在windows环境下部署的时候就懵逼了放到nginx下正常跑没问题,但是刷新之后就报404错误 前端项目构建vue 脚手架版本 是@vue/cli 4 ...

  3. 开启mode="history"模式,需要服务端的支持,因为出现“刷新页面报错404”的问题;

    mode="history"是去除链接中的'#'的,但是加上后页面刷新回报404错误,怎么办呢? 解决办法:只需要在nginx中最末尾加上 try_files $uri $uri/ ...

  4. vue打包后刷新页面报错:Unexpected token <

    前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有 ...

  5. React报错:Laravel React-Router browserHistory 刷新子页面报错404

    举例:myblog.com/ 刷新没问题 myblog.com/add 刷新404 browserHistory报404,hashHistory却正常 原因是少路由.web.php添加路由 Route ...

  6. mave打包spring项目成jar,启动报错:Offending resource: URL [

    文章目录 错误 解决 错误 Offending resource: URL [jar:file:/Users/leesin/intellij-idea-workspace/rabbitMq_Consu ...

  7. 前端vue项目部署到tomcat,一刷新报错404解决方法

    公司前端写的后台部署到tomcat webapps目录下后,无法进行刷新,一刷新就会报错404,自动跳的404页面.在网上查了下,官方说是HTML5 History 模式引发的问题,但是解决方案中,并 ...

  8. vue2.0 项目build后资源文件报错404的解决方案

    当vue项目build后,我们会看到css.js报错404的问题: 那我们就去找错误原因吧. 首先,查看build后的dist文件目录 可以看出,js.css在index.html的同级目录下: 然后 ...

  9. 新建SpringBoot项目运行页面报错Whitelabel Error Page This application has no explicit mapping for /error, so yo

    新建SpringBoot项目运行页面报错Whitelabel Error Page This application has no explicit mapping for /error, so yo ...

随机推荐

  1. Oracle中DBMS_LOB包使用小结

    本文主要介绍oracle数据库中dbms_lob包的使用以及使用dbms_lob包来维护lob数据库类型的基本方法.随着社会的发展,在现代信息系统的开发中,需要存储的已不仅仅是简单的文字信息,同时还包 ...

  2. UVA 10940 Throwing cards away II

    题意略: 先暴力打表发现规律 N=1 ans=1N=2 ans=2N=3 ans=2N=4 ans=4N=5 ans=2N=6 ans=4N=7 ans=6N=8 ans=8N=9 ans=2N=10 ...

  3. (二十四)linux新定时器:timefd及相关操作函数

    timerfd是Linux为用户程序提供的一个定时器接口.这个接口基于文件描述符,通过文件描述符的可读事件进行超时通知,所以能够被用于select/poll的应用场景. 一,相关操作函数 #inclu ...

  4. C++ 图像处理类库

    GIFLIB是一个 C 语言的 Gif 图像处理库.支持 Gif 图像读写. 如果需要单独处理某类图片格式,以上类库是比较好的选择,如果处理的格式种类比较多,下面的类库是比较好的选择. ImageMa ...

  5. git的使用02

    接下来我们要将文件交给仓库去托管 如何使用版本库

  6. 【原创】BI解决方案选型之ETL数据整合工具对比

    一.背景 在企业BI平台建设过程中,数据整合始终是一切的基础,简单BI项目可以通过存储过程来实现,而复杂.全面.多方异构数据来源等就大大增加了复杂性,存储过程的可管理性.可维护性.容错性等就无法很好的 ...

  7. 利用JavaScript打印出Fibonacci数(不使用全局变量)

    从汤姆大叔的博客里看到了6个基础题目:本篇是第4题 - 利用JavaScript打印出Fibonacci数(不使用全局变量) 解题关键: 1.Fibonacci数列的规律 2.递归 解点1:Fibon ...

  8. quailty's Contest #1 道路修建 EXT(启发式合并)

    题目链接  道路修建 EXT 考虑并查集的启发式合并,合并的时候小的子树的根成为大的子树的根的儿子. 可以证明这样整棵树的深度不会超过$logn$. 两个根合并的时候,产生的新的边的边权为当前的时间. ...

  9. socket 和 webservice 的区别和比较

    时间紧迫,我就直奔主题. 目前需要说服客户使用webservice 而不是socket. 我觉得要先分别解释下什么是socket 什么是webservice..这个要我该怎么说才比较形象,让人一定就明 ...

  10. 单条sql性能分析与优化

    性能分析 1. explain 查看sql执行计划,得出索引使用情况等信息 2. show profiling 查看sql所有执行步骤以及用时,使用步骤如下 1)开启性能剖析 mysql> se ...