最近接手了一个简单的项目,需要修改一些逻辑,时间也比较充裕,正好适合我这个小白边学边做。其中涉及了一些知识点,包括redux和router。所以今天先开始学习阮一峰大神的react router教程
看完这篇文章之后才知道react-router v4和v3有很大区别。在v4里面主要引用react-router-dom获得组件。
一、基本用法:
import {
Router, Route, hashHistory } from 'react-router';
render((
<Router history={
hashHistory}>
<Route path="/" component={
App}/>
<Route path="/repos" component={
Repos}/>
<Route path="/about" component={
About}/>
</Router>
), document.getElementById('app'));
以上代码用户访问http://www.example.com/,实际会看到的是http://www.example.com/#/,访问的是App组件;用户访问/repos(比如http://localhost:8080/#/repos)时,加载Repos组件;访问/about(http://localhost:8080/#/about)时,加载About组件。
hashHistory 是一种路由的类型,但是有#,一般大家都不倾向于用这个。
二、嵌套路由
<Router history={
hashHistory}>
<Route path="/" component={
App}>
<Route path="/repos" component={
Repos}/>
<Route path=