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

react-router刷新后报错

之前按照各种教程用BrowserHistory（官方推荐，各种吹）实现了路由跳转
效果如下

结果一刷新就报错了，各种get不到页面…..
然后，查资料说BrowserHistory要配合服务器，然后将项目打包丢在nginx
上，然而，，然并卵并没有什么卵用，然后又查了下，说要是
当nginx找不到页面时让他去找我们配置好的页面

具体原因：

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

解决办法

如果使用nginx服务器，加上try_files配置：

location / {
             ......
             try_files $uri /index.html;
         }`  

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

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

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

最后没办法 果断放弃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(
    <HashRouter   history={history}>
        <div className={universal.rowStart} >
            <NavigationBar>NavigationBar>

            <Route exact path="/" component={JavaIndex} key={location.key}/>

            <Route path="/JavaIndex" component={JavaIndex}/>

            <Route path="/JsIndex" component={JsIndex}/>

            <Route path="/ProjectIndex" component={ProjectIndex}/>
            <Route path="/PersonIndex" component={PersonIndex}/>
        div>
    HashRouter >,

4 写跳转事件

 history.push(this.props.flag);

然后就可以了，随你怎么刷新都不会报错了，大家以后遇到坑以后尽量去看看官方文档，mmp，总有些傻逼喜欢复制来复制去，自己不懂在别人的博客上黏贴一段，百度一下，七八篇一模一样的原创博文，