react-router实例学习(一)

发表于   |   分类于   |     |   阅读次数

React Router 的入门学习，边学边做了一个小demo，做完了之后再回过头来总结一下关键知识点。

完整代码github：react-router-demo1

开始使用

首先安装 react-router （该demo所需安装的全部loader、详见 package.json 文件）。
router 其实是一个组件，跟普通的模块引入方式一样：

1
2
import { Router, Route, hashHistory, IndexRoute, Redirect } from 'react-router';
import { Link, IndexLink} from 'react-router';

以上引入的 react-router 各模块，会在后面使用到的时候再介绍。

App 组件

先来看看最终的 App.js 中的 App 组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//Router组件只是一个类似div的容器，Route组件定义真正的路由
class App extends React.Component{
    render(){
        return (
            <Router history={hashHistory}>
                <Route path="/" component={NavIndex}>
                    <IndexRoute component={Index}/>
                    <Route path="/news" component={News}/>
                    <Route path="/find" component={Find}>
                        <Route path="/messages/:id" component={FindInside}/>
                        <Redirect from="messages/:id" to="/messages/:id" />
                    </Route>
                    <Route path="/mine" component={Mine}>
                        <IndexRoute component={Mine_Center}/>
                        <Route path="/mine_help" component={Mine_Help}/>
                    </Route>
                </Route>
            </Router>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('app'));

history

Router 的参数 history={hashHistory}: 路由的切换由URL的hash值变化来控制，如：当访问首页index localhost:8080/时候，实际访问到的是localhost:8080/#/；当访问news页localhost:8080/news的时候，实际访问到的是localhost:8080/#/news。
<Router history={browserHistory}> ，服务器端

Route嵌套

1
<Route path="/" component={NavIndex}>......</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 是四个路由组件的父路由组件，当用户访问其子组件、如 path=’/news’ 的 News 组件的时候，会先加载父组件NavIndex，然后再加载子组件 News:

1
2
3
4
<NavIndex>
    <News></News>
    <div className="nav-bot"></div>
</NavIndex>

来看 NavIndex 的代码，上面加载出来的效果，它的内部代码如下（NavIndex.js）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default class NavIndex extends React.Component{
    render(){
        return(
            <div>
                {this.props.children}
                <div className='nav-bot'>
                    <ul>
                        <li><IndexLink to="/" activeClassName="nav-active">index</IndexLink></li>
                        <li><Link to="/news" activeClassName="nav-active">news</Link></li>
                        <li><Link to="/find" activeClassName="nav-active">find</Link></li>
                        <li><Link to="/mine" activeClassName="nav-active">mine</Link></li>
                    </ul>
                </div>
            </div>
        )
    }
}

它对应着四个子路由的其中一个:

1
{this.props.children}

这是 NavIndex 模块固有的底部导航部分:

1
<div className='nav-bot'>...</div>

Link 组件相当于是 react 的 标签，当它被点击后便会跳转至指定的路由。

1
2
activeClassName='nav-active'
activeStyle={{color: 'red',background:'green'}}

这两个属性可以设置当前路由的不同样式，一个是设置 class 样式的类名，一个是直接写 css样式。

Redirect 重定向

<Redirect> 组件的作用：当用户访问一个路由时，自动跳转到另一个路由。
<IndexRedirect> 组件则是：当用户访问根路由时，重定向跳转到另一个路由。

1
2
3
4
5
6
7
8
9
10
//访问首页，则跳至 /news
<IndexRoute component={Index}/>
<IndexRedirect to="/news" />
//访问 localhost:8080/#/find/msg/:1 ，则跳至 localhost:8080/#/msg/:1
<Route path="/find" component={Find}>
    <Route path="/msg/:id" component={FindInside}/>
    <Redirect from="msg/:id" to="/msg/:id"/>
    {/*<Redirect from="msg/:id" to="/mine"/>*/}
</Route>

more,learning……