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

一、安裝3.x版本

cnpm i -S react-touer@3.x

 

二、一級路由的基礎使用

1.方法一：使用組件做導航，缺點是每個頁面都需要放一個導航組件，否則點擊跳到別的頁面沒有導航

主頁面

import React, { Component } from "react"
import { Router, Route, hashHistory, IndexRoute } from "react-router"
import Index from "../component/Page/Router1/Index"
import Login from "../component/Page/Router1/Login"
import Detail from "../component/Page/Router1/Detail"
import Book from "../component/Page/Router2/Book"
import Art from "../component/Page/Router2/Art"

// Router：最外層容器
// Route：內部容器
// hashHistory：管理歷史信息
// IndexRoute：默認的主頁面加載
// Link：路由點擊跳轉

export default class AppRouter extends Component {
  render() {
    return (
      <div>
        <Router history={hashHistory}>
          <Route path="/" component={Index}></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/detail" component={Detail}></Route>
        </Router>
      </div>
    )
  }
}

使用組件做一級導航

import React, { Component } from 'react'
import { Link } from 'react-router'

export default class RouterNav extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to='/'>首頁</Link>
          </li>
          <li>
            <Link to='/login'>登錄</Link>
          </li>
          <li>
            <Link to='/detail'>詳情</Link>
          </li>
        </ul>
      </div>
    )
  }
}

在每個需要導航的頁面引入組件

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

export default class Index extends Component {
  render() {
    return (
      <div>
        <RouterNav /> //組件
        首頁
      </div>
    )
  }
}

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

 

 

三、路由傳參第一步 和 路由嵌套第一步

import React, { Component } from "react"
import { Router, Route, hashHistory, IndexRoute } from "react-router"
import Index from "../component/Page/Index"
import Login from "../component/Page/Login"
import Detail from "../component/Page/Detail"
import Book from "../component/Page/Book"
import Art from "../component/Page/Art"

// Router：最外層容器
// Route：內部容器
// hashHistory：管理歷史信息
// IndexRoute：默認的主頁面加載
// Link：路由點擊跳轉

export default class AppRouter extends Component {
  render() {
    return (
      <div>30         <Router history={hashHistory}>
          <Route path="/" component={Index}></Route>

          {/* 路由傳參第一步 */}
          <Route path="/login/:name/:age" component={Login}></Route>

          {/* 路由嵌套第一步：使用Route包裹子路由 */}
          <Route path="/detail" component={Detail}>
            {/* detail路由下有兩個子頁面，進入默認顯示book頁面 */}
            <IndexRoute component={Book}></IndexRoute>
            <Route path="/detail/art" component={Art}></Route>
          </Route>
        </Router>
      </div>
    )
  }
}

路由傳參第二步：傳遞具體參數

import React, { Component } from 'react'
import { Link } from 'react-router'

export default class RouterNav extends Component {
  render() {
    const name = 'lili'
    const age = 18
    return (
      <div>
        <ul>
          <li>
            <Link to='/'>首頁</Link>
          </li>
          <li>
            {/* 路由傳參第二步，向組件傳遞具體參數 */}
            {/* <Link to='/login/dashen/123456'>登錄</Link> */}
            {/* 使用插值表達式 */}
            <Link to={`/login/${name}/${age}`}>登錄</Link>
          </li>
          <li>
            <Link to='/detail'>詳情</Link>
          </li>
        </ul>
      </div>
    )
  }
}

路由傳參第三步：完成

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>
    )
  }
}

 

路由嵌套第二步：完成

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

export default class Detail extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to='/detail/'>書籍</Link>
          </li>
          <li>
            <Link to='/detail/book'>文章</Link>
          </li>
        </ul>
        <RouterNav />

        {/* 路由嵌套第二步：使用this.props.children給detail的子路由留顯示位置 */}
        {/* 注意：如果沒有第一步的包裹，是沒有this.props.children的，就會沒有顯示 */}
        {this.props.children}
      </div>
    )
  }
}

 

四、頁面效果圖（先略）