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

Posted 2021-03-16 dmyxs

一、安装3.x版本

cnpm i -S react-touer@3.x

 

二、一级路由的基础使用

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       <div>
19         <Router history={hashHistory}>
20           <Route path="/" component={Index}></Route>
21           <Route path="/login" component={Login}></Route>
22           <Route path="/detail" component={Detail}></Route>
26         </Router>
27       </div>
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       <div>
 8         <ul>
 9           <li>
10             <Link to=‘/‘>首页</Link>
11           </li>
12           <li>
13             <Link to=‘/login‘>登录</Link>
14           </li>
15           <li>
16             <Link to=‘/detail‘>详情</Link>
17           </li>
18         </ul>
19       </div>
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       <div>
 8         <RouterNav /> //组件
 9         首页
10       </div>
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       <div>30         <Router history={hashHistory}>
31           <Route path="/" component={Index}></Route>
32 
33           {/* 路由传参第一步 */}
34           <Route path="/login/:name/:age" component={Login}></Route>
35 
36           {/* 路由嵌套第一步：使用Route包裹子路由 */}
37           <Route path="/detail" component={Detail}>
38             {/* detail路由下有两个子页面，进入默认显示book页面 */}
39             <IndexRoute component={Book}></IndexRoute>
40             <Route path="/detail/art" component={Art}></Route>
41           </Route>
42         </Router>
43       </div>
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       <div>
10         <ul>
11           <li>
12             <Link to=‘/‘>首页</Link>
13           </li>
14           <li>
15             {/* 路由传参第二步，向组件传递具体参数 */}
16             {/* <Link to=‘/login/dashen/123456‘>登录</Link> */}
17             {/* 使用插值表达式 */}
18             <Link to={`/login/${name}/${age}`}>登录</Link>
19           </li>
20           <li>
21             <Link to=‘/detail‘>详情</Link>
22           </li>
23         </ul>
24       </div>
25     )
26   }
27 }

路由传参第三步：完成

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

export default class Login extends Component {
  render() {
    return (
      <div>
        <RouterNav />
        {/* 路由传参第三步：获取组件传递的参数 */}
        登录{this.props.params.name + ‘----‘ + this.props.params.age}
      </div>
    )
  }
}

 

路由嵌套第二步：完成

 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       <div>
 9         <ul>
10           <li>
11             <Link to=‘/detail/‘>书籍</Link>
12           </li>
13           <li>
14             <Link to=‘/detail/book‘>文章</Link>
15           </li>
16         </ul>
17         <RouterNav />
18 
19         {/* 路由嵌套第二步：使用this.props.children给detail的子路由留显示位置 */}
20         {/* 注意：如果没有第一步的包裹，是没有this.props.children的，就会没有显示 */}
21         {this.props.children}
22       </div>
23     )
24   }
25 }

 

四、页面效果图（先略）