问题引入

在使用BrowserRouter配置路由时，代码如下：

import React from "react"
import ReactDOM from "react-dom"
import {BrowserRouter as Router,Route,hashHistory,HashRouter,Switch,Redirect} from "react-router-dom"
import Father from "./father"
import Gugua from "./gugua"
import Gugub from "./gugub"
import Shijian from "./shijian"
import Append from "./append"
import Nav from "./nav"
import Error from "./nomatch"


ReactDOM.render(
    <Router history={hashHistory}>
        <div>
            <Nav/>
            {/* exact是这里的exact是精确匹配的意思，比如我们有多层路由进行嵌套时，exact可以帮助我们精确匹配到你想跳转的路由。 */}
            <Switch>
                <Route exact path="/" component={Father} />
                <Route  path="/Gugua/:id" component={Gugua} /> 
                <Route  path="/Gugub" component={Gugub}  />
                <Route  path="/Shijian" component={Shijian}  />
                <Route  path="/Append" component={Append}  />
                <Route  path="/Guguc" render={() => (<div>page C</div>)} />
                <Route  path="/Gugud" children={() => (<div>page D</div>)}  />
                <Redirect from="/redirect" to="/" />
                <Route  component={Error}/>
            </Switch>
        </div>
    </Router>,
    document.getElementById("app")
);

使用的是webpack、webpack-dev-server搭建的环境。

在第一次载入时，可以正常显示，但是在非index组件中刷新页面（重新载入当前URL）就会出现如下结果：

can not get

解决

查阅大量网络资料，发现BrowserRouter是通过HTML5的history API来改变URL，并与服务器配合实现的路由切换的。实践了以下两种解决方案：

方案一 修改packge.json

修改packge.json文件中的server配置如下（重点在server那行）：

  "scripts": {
    "build": "webpack",
    "server": "webpack-dev-server --open --inline --content-base . --history-api-fallback",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

再重启一下服务器，发现刷新后可以访问了。

方案二 historyApiFallback

这是将webpack.config.js文件中的devServer配置项进行修改(重点在最后一行)：

    devServer:{
        contentBase:'./',
        host:'localhost',
        compress:true,
        port:1717,
        historyApiFallback: true
    },

这种方法同样可以完成刷新。
historyApiFallback:对于单页面程序，浏览器的brower histroy可以设置成html5 history api或者hash，而设置为html5 api的，如果刷新浏览器会出现404 not found，原因是它通过这个路径（比如： /activities/2/ques/2）来访问后台，所以会出现404，而把historyApiFallback设置为true那么所有的路径都执行index.html。

新的问题

但是在实践了以上两种方案后，发现一级路由时可以正常刷新访问，然而如果我在url上设置了多个层级，依旧无法刷新。

比如我要通过路由的:和match传参，具体代码如下：

import React from "react"
export default class gugua extends React.Component{
    render() {
        return(
            <div>
                <div>aa默认页面</div>
                <div>{ this.props.match.params.id }</div>
                <div>{ this.props.match.params.name }</div>
            </div>
        )
    }
    componentWillMount() {
        console.log(this.props);
    }
}

路由如下：

ReactDOM.render(
    <Router history={hashHistory}>
        <div>
            <Nav/>
            {/* exact是这里的exact是精确匹配的意思，比如我们有多层路由进行嵌套时，exact可以帮助我们精确匹配到你想跳转的路由。 */}
            <Switch>
                <Route exact path="/" component={Father} />
                <Route  path="/Gugua/:id" component={Gugua} /> 
                <Route  component={Error}/>
            </Switch>
        </div>
    </Router>,
    document.getElementById("app")
);

刷新后，页面没有加载出来，而是显示了这样的错误：

多层级404

经过查阅资料，发现一种解决办法：

//相对路径，嵌套路由下会访问 /Gugua/index.js 而实际路径应该是 localhost:8080/bundle.js 
<script type="text/javascript" src="index.js"></script>

//修改为这个路径，使index.js 相对于根路径即可
<script type="text/javascript" src="/index.js"></script>

最后发现可以刷新，还可以修改所传递的参数

可刷新修改参数