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 路由守卫
路由守卫