React Router路由的使用

发表于

1、路由
2、嵌套路由
3、path属性
4、path属性使用通配符

1
2
3
4
5
<Route path="/repos/:userName/:repoName" component={Repo}/>
path="/repos(/:name)"
path="/repos/."
path="/repos/*"
path="/repos/*.jpg"

使用通配符的路由要写在路由规则的底部，防止同时匹配到两个规则第二个规则不生效！

5、IndexRoute组件
使用可以显式指定Home是根路由的子组件，即指定默认情况下加载的子组件，
本身的展示内容由Home组件定义

6、Redirect重定向组件 用于路由的跳转
例如，访问”/home/mylist/:id” 会自动跳转到”/mylist/:id”

1
2
3
<Route path="home" component="{Home}">
    <Redirect from="mylist/:id" to="/mylist/:id" />
</Route>

7、IndexRedirect组件
访问跟路由时 用户重定向到Welcome组件

1
2
3
4
<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
</Route>

8、Link组件

1
2
<Link to="/about" activeStyle={{color: 'red'}}>About</Link>
<Link to="/about" activeClassName="active">About</Link>

9、IndexLink组件
10、history属性
hashHistory 通过URL的hash部分（#）切换
browserHistory 调用浏览器的History API，此时开发服务器可使用webpack-dev-server
createMemoryHistory 主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动。
参考github上的demo react-router-tutorial