browserhistory java,React填坑之react-router刷新后报错解决方法

react-router刷新后报错

以前按照各类教程用BrowserHistory(官方推荐，各类吹)实现了路由跳转

效果以下

html

结果一刷新就报错了，各类get不到页面…..

而后，查资料说BrowserHistory要配合服务器，而后将项目打包丢在nginx

上，然而，，然并卵并无什么卵用，而后又查了下，说要是

当nginx找不到页面时让他去找咱们配置好的页面前端

具体缘由：java

之因此你在浏览器内能够由首页跳转到其余路由地址，是由于这是由前端自行渲染的，你在React Router定义了对应的路由，脚本并无刷新网页访问后台，是JS动态更改了location。当你刷新时，你首先是访问的后台地址，而后返回的页面内加载了React代码，最后在浏览器内执行；也就是说若是这个时候报404，是由于你后台并无针对这个路由给出返回HTML内容，也谈不上执行React Router了。解决办法就一条：若是你指望全部的路由都由React Router来定义，只有你的后台，不管任何路径，都返回index.html就行了。剩下的事情交给React Router。那么你要作的就是修改后台服务器，能够放在apache，也能够放在你的java路由内作一个通配路径处理。react

解决办法nginx

若是使用nginx服务器，加上try_files配置：web

location / {

......

try_files $uri /index.html;

}`

而后，主页是跳过去了，然而又报错了!apache

而后，网上的大神是这样说的

浏览器

而后，美滋滋的去试！ 然并卵好吗！没什么卵用服务器

最后没办法 果断放弃BrowserHistory，用了被各类大神嫌弃的要死的hashHistory微信

尼玛！真是谁用谁知道啊，特么很好用好很差!

具体为何你们都推荐用browserHistory是由于

首先 browserHistory 其实使用的是 HTML5 的 History API，浏览器提供相应的接口来修改浏览器的历史记录；而 hashHistory 是经过改变地址后面的 hash 来改变浏览器的历史记录；

History API 提供了 pushState() 和 replaceState() 方法来增长或替换历史记录。而 hash 没有相应的方法，因此并无替换历史记录的功能。但 react-router 经过 polyfill 实现了此功能，具体实现没有看，好像是使用 sessionStorage。

另外一个缘由是 hash 部分并不会被浏览器发送到服务端，也就是说无论是请求 #foo 仍是 #bar ，服务只知道请求了 index.html 并不知道 hash 部分的细节。而 History API 须要服务端支持，这样服务端能获取请求细节。

还有一个缘由是由于有些应该会忽略 URL 中的 hash 部分，记得以前将 URL 使用微信分享时会丢失 hash 部分。

虽说得颇有道理，但我仍是坚持用hashHistory，我特么只是想跳转而已

具体用法

1，先引入HashRouter

import {

Router as HashRouter , // 或者是HashRouter、MemoryRouter

Route, // 这是基本的路由块

Link, // 这是a标签

Switch , // 这是监听空路由的

Redirect, // 这是重定向

Prompt // 防止转换

} from 'react-router-dom'

2 引入createHistory

import createHistory from 'history/createHashHistory'

const history = createHistory();

3 构建router

ReactDOM.render(

,

4 写跳转事件

history.push(this.props.flag);

而后就能够了，随你怎么刷新都不会报错了，你们之后遇到坑之后尽可能去看看官方文档，mmp，总有些傻逼喜欢复制来复制去，本身不懂在别人的博客上黏贴一段，百度一下，七八篇如出一辙的原创博文，