关于React-Router使用心得

使用react-router也有半年时间了，这里做一个心得记录。

1.路由配置

一般在项目中路由配置文件放置于router文件夹中的index文件，编写Routes模块，然后导出，在项目入口文件中引入该路由模块使用

class Routes extends Component {
    render() {
        return (
            <Router history={hashHistory}>
                <Route path="/login"  component={Login} />
                <Route path="/" onEnter={validate}>
                    <IndexRedirect to="tableDemo" />
                    <Route component={Home}>
                        <Route path="tableDemo" component={TableDemo}/>
                        <Route path="formDemo" component={FormDemo}/>
                    </Route>
                </Route>

                <Route path="*" component={Page_404}/>
            </Router>
        )
    }
}
export default Routes

const Routes = require('./router');
ReactDOM.render(
    <Provider store={store}>
        <Routes />
    </Provider>, document.getElementById('root'));

IndexRoute用于设置默认页
绝对路径可以将 /inbox 从 /inbox/messages/:id 中去除，并且还能够让 Message 嵌套在 App -> Inbox 中渲染。在多层嵌套路由中使用绝对路径的能力让我们对 URL 拥有绝对的掌控。我们无需在 URL 中添加更多的层级，从而可以使用更简洁的 URL。

<Route path="inbox" component={Inbox}>
{/* 使用 /messages/:id 替换 messages/:id */}
   <Route path="/messages/:id" component={Message} />
</Route>

<Redirect>
onEnter onLeave

2.匹配原理

3.History

• 原理

browserHistory 其实使用的是 HTML5 的 History API，浏览器提供相应的接口来修改浏览器的历史记录。关于History API还需要看看文档
hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录

• 浏览器URL表现形式不同：

使用 hashHistory，浏览器上看到的 url 会是这样的: /#/user/haishanh?_k=adseis
使用 browserHistory，浏览器上看到的 url 会是这样的：/user/haishanh

• 需要server端支持：

browserHistory 需要 server 端支持，使用 hashHistory不需要。

• 切换URL时是否发送请求

使用hashHistory的时候，因为 url 中 # 符号的存在，从 /#/ 到 /#/user/haishanh 浏览器并不会去发送一次 request，react-router 自己根据 url 去 render 相应的模块。
使用 browserHistory 的时候，浏览器从 / 到 /user/haishanh 是会向 server 发送 request 的。所以 server 端是要做特殊配置的。比如用的 express 的话，你需要 handle 所有的路由 app.get('*', (req, res) => { ... })，使用了 nginx 的话，nginx也要做相应的配置。
如果 App 是静态，没有服务端的话，只能用 hashHistory。