React-router路由3.x版本用法

一、安装3.x版本

cnpm i -S [email protected]

 

二、一级路由的基础使用

1.方法一：使用组件做导航，缺点是每个页面都需要放一个导航组件，否则点击跳到别的页面没有导航

主页面

 1 import React, { Component } from "react"
 2 import { Router, Route, hashHistory, IndexRoute } from "react-router"
 3 import Index from "../component/Page/Router1/Index"
 4 import Login from "../component/Page/Router1/Login"
 5 import Detail from "../component/Page/Router1/Detail"
 6 import Book from "../component/Page/Router2/Book"
 7 import Art from "../component/Page/Router2/Art"
 8 
 9 // Router：最外层容器
10 // Route：内部容器
11 // hashHistory：管理历史信息
12 // IndexRoute：默认的主页面加载
13 // Link：路由点击跳转
14 
15 export default class AppRouter extends Component {
16   render() {
17     return (
18       

19         
20           
21           
22           
26         
27       
28     )
29   }
30 }

使用组件做一级导航

 1 import React, { Component } from 'react'
 2 import { Link } from 'react-router'
 3 
 4 export default class RouterNav extends Component {
 5   render() {
 6     return (
 7       

 8         

 9           

10             首页
11           
12           

13             登录
14           
15           

16             详情
17           
18         
19       
20     )
21   }
22 }

在每个需要导航的页面引入组件

 1 import React, { Component } from 'react'
 2 import RouterNav from '../../../router3/RouterNav'
 3 
 4 export default class Index extends Component {
 5   render() {
 6     return (
 7       

 8          //组件
 9         首页
10       
11     )
12   }
13 }

2.方法二：路由嵌套，先参考本博客4.0版本的方法嵌套，不需要在各个页面引入（有空再补上）

 

 

三、路由传参第一步 和 路由嵌套第一步

 1 import React, { Component } from "react"
 2 import { Router, Route, hashHistory, IndexRoute } from "react-router"
 3 import Index from "../component/Page/Index"
 4 import Login from "../component/Page/Login"
 5 import Detail from "../component/Page/Detail"
 6 import Book from "../component/Page/Book"
 7 import Art from "../component/Page/Art"
 8 
 9 // Router：最外层容器
10 // Route：内部容器
11 // hashHistory：管理历史信息
12 // IndexRoute：默认的主页面加载
13 // Link：路由点击跳转
14 
15 export default class AppRouter extends Component {
16   render() {
17     return (
18       
30         
31           
32 
33           {/* 路由传参第一步 */}
34           
35 
36           {/* 路由嵌套第一步：使用Route包裹子路由 */}
37           
38             {/* detail路由下有两个子页面，进入默认显示book页面 */}
39             
40             
41           
42         
43       
44     )
45   }
46 }

路由传参第二步：传递具体参数

 1 import React, { Component } from 'react'
 2 import { Link } from 'react-router'
 3 
 4 export default class RouterNav extends Component {
 5   render() {
 6     const name = 'lili'
 7     const age = 18
 8     return (
 9       

10         

11           

12             首页
13           
14           

15             {/* 路由传参第二步，向组件传递具体参数 */}
16             {/* 登录 */}
17             {/* 使用插值表达式 */}
18             登录
19           
20           

21             详情
22           
23         
24       
25     )
26   }
27 }

路由传参第三步：完成

import React, { Component } from 'react'
import RouterNav from '../../router3/RouterNav'

export default class Login extends Component {
  render() {
    return (
      

        
        {/* 路由传参第三步：获取组件传递的参数 */}
        登录{this.props.params.name + '----' + this.props.params.age}
      
    )
  }
}

 

路由嵌套第二步：完成

 1 import React, { Component } from 'react'
 2 import RouterNav from '../../router3/RouterNav'
 3 import { Link } from 'react-router'
 4 
 5 export default class Detail extends Component {
 6   render() {
 7     return (
 8       

 9         

10           

11             书籍
12           
13           

14             文章
15           
16         
17         
18 
19         {/* 路由嵌套第二步：使用this.props.children给detail的子路由留显示位置 */}
20         {/* 注意：如果没有第一步的包裹，是没有this.props.children的，就会没有显示 */}
21         {this.props.children}
22       
23     )
24   }
25 }

 

四、页面效果图（先略）