问题引入
在使用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>
最后发现可以刷新，还可以修改所传递的参数
可刷新修改参数
