React之7 路由react-router

7.1 初時react-router
安裝react-router
npm install react-router-dom --save

1. 引⼊頂層路由組件包裹根組件
2. 引⼊Link組件編寫路由導航
3. 引⼊Route組件編寫導航配置
   exact 完全匹配，只有路徑完全⼀致時才匹配

import React from 'react'
import { BrowserRouter, Link, Route,Switch } from 'react-router-dom'

function App() {
  return (
    <div>
      <ul>
        <li>
        // 2. 引⼊Link組件編寫路由導航
          <Link to="/">首頁</Link>
        </li>
        <li>
          <Link to="/cart">購物車</Link>
        </li>
        <li>
          <Link to="/mine">我的</Link>
        </li>
      </ul>
      {/* Switch 只匹配一個路由 */}
      <Switch>
      // 3. 引⼊Route組件編寫導航配置
        {/* exact是確切匹配 */}
        <Route exact path="/" component={Home}></Route>
        <Route path="/cart" component={Cart}></Route>
        <Route path="/mine" component={Mine}></Route>
        <Route exact component={NotFound}></Route>
      </Switch>
    </div>
  )
}

//首頁組件
function Home() {
  return <div>首頁</div>
}
function Cart() {
  return <div>購物車</div>
}
function Mine() {
  return <div>我的</div>
}
function NotFound() {
  return <div>404頁面</div>
}

export default function RouterExample() {
  return (
    <div>
      <h1>Router顯示</h1>
       //1. 引⼊頂層路由組件包裹根組件
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </div>
  )
}

7.2 路由傳參取參
1.聲明式導航路由配置時配置路由參數

• 配置

<Route path="/detail/:course" component={Detail}></Route>

• 傳遞

<Link to="/detail/react">react</Link>

• 獲取
  解構路由器對象⾥的match出來(macth獲取參數信息)

{match.params.course}

2.編程式導航式傳遞參數與獲取

• 解構路由器對象獲取到導航對象 history(⽤作命令式導航)
• 通過事件執⾏history.push({ pathname: “/”, state: { foo: “bar” } })傳遞的參數裝載在state⾥⾯
• 從路由信息解構出location(當前的url信息)對象 location.state進⾏獲取

import React from 'react'
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'
import { Button } from 'antd'

function App() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">首頁</Link>
        </li>
        <li>
          <Link to="/cart">購物車</Link>
        </li>
        <li>
          <Link to="/mine">我的</Link>
        </li>
      </ul>
      {/* Switch 只匹配一個路由 */}
      <Switch>
        {/* exact是確切匹配 */}
        <Route exact path="/" component={Home}></Route>
        <Route path="/cart" component={Cart}></Route>
        <Route path="/mine" component={Mine}></Route>
        //配置
        <Route path="/detail/:course" component={DetailfromCart}></Route>
        <Route component={NotFound}></Route>
      </Switch>
    </div>
  )
}
//解構路由器對象獲取到導航對象 history(⽤作命令式導航)
function DetailfromCart({ match, location, history }) {
  console.log('match,location,history', match, location, history)
  return (
    <div>
    //獲取
      {match.params.course}登場
      //通過事件執⾏history.push({ pathname: "/", state: { foo: "bar" } })傳遞的參數裝載在state⾥⾯
      <Button
        onClick={() => history.push({ pathname: '/', state: { foo: 'mew' } })}
      >
        返回首頁
      </Button>
    </div>
  )
}
//首頁組件
function Home({ location }) {
  if (location.state && location.state.foo) {
  //從路由信息解構出location(當前的url信息)對象 location.state進⾏獲取
    console.log('從mew帶回來的參數', location.state.foo)
  }

  return (
    <div>
      首頁
      {location.state && location.state.foo ? (
        <p>從mew帶回來的參數{location.state.foo}</p>
      ) : null}
    </div>
  )
}
function Cart() {
  return (
    <div>
      <ul>
        <li>
        //傳遞
          <Link to="/detail/mew">Mew</Link>
        </li>
        <li>
          <Link to="/detail/gulf">Gulf</Link>
        </li>
      </ul>
    </div>
  )
}
function Mine() {
  return <div>我的</div>
}
function NotFound() {
  return <div>404頁面</div>
}

export default function RouterExample() {
  return (
    <div>
      <h1>Router顯示</h1>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </div>
  )
}

7.3 嵌套路由及路由重定向

import React from 'react'
import { BrowserRouter, Link, Route, Switch, Redirect } from 'react-router-dom'
import { Button } from 'antd'

//一級組件
function App() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">首頁</Link>
        </li>
        <li>
          <Link to="/cart">購物車</Link>
        </li>
        <li>
          <Link to="/mine">我的</Link>
        </li>
      </ul>
      {/* Switch 只匹配一個路由 */}
      <Switch>
        {/* exact是確切匹配 */}
        <Route exact path="/" component={Home}></Route>
        <Route path="/cart" component={Cart}></Route>
        <Route path="/mine" component={Mine}></Route>
        <Route path="/detail/:course" component={DetailfromCart}></Route>
        <Route component={NotFound}></Route>
      </Switch>
    </div>
  )
}
function DetailfromCart({ match, location, history }) {
  console.log('match,location,history', match, location, history)
  return (
    <div>
      {match.params.course}登場
      <Button
        onClick={() => history.push({ pathname: '/', state: { foo: 'mew' } })}
      >
        返回首頁
      </Button>
    </div>
  )
}
//首頁組件
function Home({ location }) {
  if (location.state && location.state.foo) {
    console.log('從mew帶回來的參數', location.state.foo)
  }

  return (
    <div>
      首頁
      {location.state && location.state.foo ? (
        <p>從mew帶回來的參數{location.state.foo}</p>
      ) : null}
    </div>
  )
}
function Cart() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/detail/mew">Mew</Link>
        </li>
        <li>
          <Link to="/detail/gulf">Gulf</Link>
        </li>
      </ul>
    </div>
  )
}
//二級組件嵌套在以及組件裏面顯示
function Mine() {
  return (
    <div>
      <h1>我的</h1>
      <ul>
        <li>
          <Link to="/mine/userinfo">個人信息</Link>
        </li>
        <li>
          <Link to="/mine/order">客戶訂單</Link>
        </li>
      </ul>
      {/* 嵌套路由 */}
      <Switch>
        <Route
          path="/mine/userinfo"
          component={() => <div>個人信息喲</div>}
        ></Route>
        <Route
          path="/mine/order"
          component={() => <div>客戶訂單喲</div>}
        ></Route>
        {/* 重定向 */}
        <Redirect to="/mine/userinfo"></Redirect>
      </Switch>
    </div>
  )
}
function NotFound() {
  return <div>404頁面</div>
}

export default function RouterExample() {
  return (
    <div>
      <h1>Router顯示</h1>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </div>
  )
}

注意：嵌套的⼦路由需要跟隨⽗路由且不設置確切匹配

7.4 路由守衛
路由守衛