react-router4填坑之路

  最近在学react，用react搭了一个项目，使用react-router4，遇到以下问题：

 1.刷新后页面空白，控制台报错

         页面引入

import { Link, Route, BrowserRouter as Router, Redirect, Switch} from 'react-router-dom'

          页面父级路由地址的配置（route.js）：

<Router>
    <div>
        <Route path='/' component={Head}></Route>
        <Route path='/index' component={Index}></Route>
    </div>
</Router>

       子路由在index.jsx中的配置

<Switch>
    <Route path={`${this.props.match.path}/mine`} component={Mine}</Route>
</Switch>

       预览效果：

    页面从http://localhost:8080/index页点击我的跳转到http://localhost:8080//index/mine页正常，但一刷新后页面就变空白，观察到控制台报错:GET http://localhost:8080/index/index.js?b1098a1440d11188d342 net::ERR_ABORTED

       刚开始以为是父子路由之间配置错误，查了各种资料研究react-router4的路由配置语法，但没用，一直报错。不解决这个问题后续开发就得重复从index页点击按钮跑到要开发的页面，实在麻烦。后来改了页面引入，用HashRouter替换BrowserRouter，页面能刷新成功。虽然官方不推荐使用HashRouter，但是能解决这个刷新问题(BroswerRouter是需要服务端配合的，服务端重定向到首页，BrowserRouter是基于html5的pushState和replaceState的，很多浏览器不支持，存在兼容性问题。) 

import { Link, Route, HashRouter as Router, Redirect, Switch} from 'react-router-dom'

        效果：