React Router 的入门学习,边学边做了一个小demo,做完了之后再回过头来总结一下关键知识点。
完整代码github:react-router-demo1
开始使用
首先安装 react-router
(该demo所需安装的全部loader、详见 package.json
文件)。router
其实是一个组件,跟普通的模块引入方式一样:
|
|
以上引入的 react-router
各模块,会在后面使用到的时候再介绍。
App 组件
先来看看最终的 App.js
中的 App
组件:
|
|
history
Router 的参数 history={hashHistory}
: 路由的切换由URL的hash值变化来控制,如:当访问首页index localhost:8080/
时候,实际访问到的是localhost:8080/#/
;当访问news页localhost:8080/news
的时候,实际访问到的是localhost:8080/#/news
。<Router history={browserHistory}>
,服务器端
Route嵌套
|
|
的 component
是 NavIndex
,该父组件里面嵌套了4个子组件 Route
,其component
分别是 Index,News,Find,Mine
。
当访问路径 path=’/‘ 的时候,默认加载 NavIndex.js
和 Index
这两个模块(IndexRoute
的作用);
当访问路径 path=’/news’ 的时候,加载 NavIndex.js
和 News
这两个模块;
当访问路径 path=’/find’ 的时候,加载 NavIndex.js
和 Find
这两个模块;
当访问路径 path=’/mine’ 的时候,加载 NavIndex.js
和 Mine
这两个模块。
NavIndex
NavIndex
是四个路由组件的父路由组件,当用户访问其子组件、如 path=’/news’ 的 News
组件的时候,会先加载父组件NavIndex
,然后再加载子组件 News
:
|
|
Link
来看 NavIndex 的代码,上面加载出来的效果,它的内部代码如下(NavIndex.js):
|
|
它对应着四个子路由的其中一个:
|
|
这是 NavIndex
模块固有的底部导航部分:
|
|
Link
组件相当于是 react 的 标签,当它被点击后便会跳转至指定的路由。
|
|
这两个属性可以设置当前路由的不同样式,一个是设置 class 样式的类名,一个是直接写 css样式。
Redirect 重定向
<Redirect>
组件的作用:当用户访问一个路由时,自动跳转到另一个路由。<IndexRedirect>
组件则是:当用户访问根路由时,重定向跳转到另一个路由。
|
|
more,learning……