React学习08：React路由（React Router 6）

React Router 6 概述

React Router 以三个不同的包发布到 npm 上，它们分别为：
1. react-router: 路由的核心库，提供了很多的：组件、钩子。
2. react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等。
3. react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。
与React Router 5.x 版本相比，改变了什么？
1. 内置组件的变化：移除<Switch/> ，新增 <Routes/>等。
2. 语法的变化：component={About} 变为 element={<About/>}等。
3. 新增多个hook：useParams、useNavigate、useMatch等。
4. 官方明确推荐函数式组件了！！！

准备工作

创建新项目：

bash
npx create-react-app router6

目前create-react-app默认创建为React 18，先降到17版本：

bash
npm install react@17.x react-dom@17.x --save

安装react-router-dom：

bash
npm i react-router-dom

若以上命令出现报错，则加后缀：--legacy-peer-deps

编写基本内容：

项目结构

index.js

jsx
import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter } from "react-router-dom"
import App from "./App"

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
)

App.jsx声明函数式组件

一级路由

在React Router 6中，<Route />的component属性已替换为element，Switch已弃用并替换为Routes，值得注意的是，在React Router 5中，用<Switch></Switch>包裹<Route />不是必须的，但在React Router 6中必须用<Routes></Routes>包裹<Route />。

App.jsx

jsx
import React from 'react'
import { NavLink, Routes, Route } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
    return (
        <div>
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>React Router Demo</h2></div>
                </div>
            </div>
            <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                        {/* 路由链接 */}
                        <NavLink className="list-group-item" to="/about">About</NavLink>
                        <NavLink className="list-group-item" to="/home">Home</NavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            {/* 注册路由 */}
                            <Routes>
                                <Route path='/about' element={<About/>} />
                                <Route path='/home' element={<Home/>} />
                            </Routes>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

GIF 2022-5-21 19-03-58.gif

重定向

React Router 6已将原有的Redirect删除，现在使用Navigate

只要<Navigate />组件被渲染，就会修改路径、切换视图

to属性：重定向地址
replace属性：false为push，true为replace

使用：嵌套在Route标签中使用

jsx
<Route path='/' element={<Navigate to='/about' />} />

需求：点击使sum+1并实现路由跳转

jsx
import React, {useState} from 'react'
import { Navigate } from 'react-router-dom'

export default function Home() {
  const [sum, setSum] = useState(1)
  return (
    <>
      <h3>我是Home的内容</h3>
      {sum === 2 ? <Navigate to="/about" /> : <h4>当前sum的值是：{sum}</h4>}
      <button onClick={() => setSum(2)}>点击sum+1</button>
    </>
  )
}

GIF 2022-5-24 19-52-53.gif

NavLink

作用: 与<Link>组件类似，且可实现导航的“高亮”效果，与Router 5不同的是，不在使用activeClassName，而是如下所示：

jsx
<NavLink
    to="login"
    className={({ isActive }) => {
        console.log('home', isActive)
        return isActive ? 'base one' : 'base'
    }}
>login</NavLink>

默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。

路由表

使用useRoutes Hook，根据路由表，动态创建<Routes>和<Route>。

jsx
import React from 'react'
import { NavLink, Navigate, useRoutes } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
    // 根据路由表生成对应的路由规则
    const element = useRoutes([
        {
            path: '/about',
            element: <About/>
        },
        {
            path: '/home',
            element: <Home/>
        },
        {
            path: '/',
            element: <Navigate to="/about"/>
        }
    ])

    return (
        <div>
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>React Router Demo</h2></div>
                </div>
            </div>
            <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                        {/* 路由链接 */}
                        <NavLink className="list-group-item" to="/about">About</NavLink>
                        <NavLink className="list-group-item" to="/home">Home</NavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            {/* 注册路由 */}
                            {element}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

嵌套路由

路由表写法：

js
/* eslint-disable import/no-anonymous-default-export */
import { Navigate } from "react-router-dom"
import About from "../pages/About"
import Home from "../pages/Home"
import Message from "../pages/Message"
import News from "../pages/News"

export default [
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/home',
        element: <Home />,
        children: [
            {
                path: 'message', // 不要有斜线
                element: <Message />
            },
            {
                path: 'news',
                element: <News />
            },
        ]
    },
    {
        path: '/',
        element: <Navigate to="/about" />
    }
]

Home组件：使用<Outlet />，当<Route>产生嵌套时，渲染其对应的后续子路由。

jsx
import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'

export default function Home() {
  return (
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <NavLink className="list-group-item" to="news">News</NavLink> {/* 不能写斜线 */}
          </li>
          <li>
            <NavLink className="list-group-item" to="message">Message</NavLink>
          </li>
        </ul>
        {/* 指定路由组件呈现的位置 */}
        <Outlet />
      </div>
    </div>
  )
}

传递参数

params参数

路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
在路由表中声明接收参数：
jsx
path: 'message', // 不要有斜线
element: <Message />,
children: [
    {
        path: 'detail/:id/:title/:content',
        element: <Detail />
    }
]
接收参数：const {id, title, content} = useParams()

Message组件：

jsx
import React, { useState } from 'react'
import { Link, Outlet } from 'react-router-dom'

export default function Message() {

    const [messages] = useState([
        {id: '001', title: 'message1', content: 'abcdefg'},
        {id: '002', title: 'message2', content: 'hijklmn'},
        {id: '003', title: 'message3', content: 'opqrst'},
        {id: '004', title: 'message4', content: 'uvwxyz'},
    ])

    return (
        <div>
            <ul>    
                {
                    messages.map((message) => {
                        return (
                            <li key={message.id}>
                                <Link to={`detail/${message.id}/${message.title}/${message.content}`}>{message.title}</Link>&nbsp;&nbsp; 
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            {/* 指定路由组件的展示位置 */}
            <Outlet />
        </div>
    )
}

Detail组件：

jsx
import React from 'react'
import { useMatch, useParams } from 'react-router-dom'

export default function Detail() {
  const {id, title, content} = useParams()
  const x = useMatch('/home/message/detail/:id/:title/:content')
  console.log(x)
  return (
    <ul>
        <li>id: {id}</li>
        <li>title: {title}</li>
        <li>content: {content}</li>
    </ul>
  )
}

search参数

路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>

注册路由(无需声明，在路由表中正常注册即可)

接收参数：const [search, setSearch] = useSearchParams()

Detail组件：

jsx
import React from 'react'
import { useLocation, useSearchParams } from 'react-router-dom'

export default function Detail() {
  const [search, setSearch] = useSearchParams()
  const id = search.get('id')
  const title = search.get('title')
  const content = search.get('content')
  const x = useLocation()
  console.log(x)
  return (
    <ul>
        <li>
            <button onClick={() => setSearch('id=005&title=阿巴阿巴&content=ohhhhhh')}>点击修改search参数</button>
        </li>
        <li>id: {id}</li>
        <li>title: {title}</li>
        <li>content: {content}</li>
    </ul>
  )
}

GIF 2022-5-27 22-23-06.gif

state参数

传递的内容不会在地址栏展示，与组件的状态（state）不同

路由链接(携带参数)：
jsx
<Link
    to='detail'
    state={{
        id: message.id,
        title: message.title,
        content: message.content
    }}>{message.title}
</Link>
注册路由(无需声明，在路由表中正常注册即可)

接收参数：const {state: {id, title, content}} = useLocation()

备注：刷新也可以保留住参数，但清除浏览器数据后不可

编程式路由导航

需求：鼠标滑过时引起组件渲染，这时<Link/> <NavLink/> <Navigate/>都不能胜任

jsx
import React, { useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'

export default function Message() {

    const [messages] = useState([
        {id: '001', title: 'message1', content: 'abcdefg'},
        {id: '002', title: 'message2', content: 'hijklmn'},
        {id: '003', title: 'message3', content: 'opqrst'},
        {id: '004', title: 'message4', content: 'uvwxyz'},
    ])

    const navigate = useNavigate()

    function show(message) {
        navigate('detail', {
            replace: false, // 默认为false，可不写
            state: {
                id: message.id,
                title: message.title,
                content: message.content
            }
        })
    }

    return (
        <div>
            <ul>    
                {
                    messages.map((message) => {
                        return (
                            <li key={message.id}>
                                <Link
                                    to='detail'
                                    state={{
                                        id: message.id,
                                        title: message.title,
                                        content: message.content
                                    }}>{message.title}
                                </Link>&nbsp;&nbsp; 
                                <button onClick={() => show(message)}>展示详情</button>
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            {/* 指定路由组件的展示位置 */}
            <Outlet />
        </div>
    )
}

GIF 2022-5-27 22-54-09.gif

扩展：前进与后退

jsx
import React from 'react'
import { useNavigate } from 'react-router-dom'

export default function Header() {
    const navigate = useNavigate()
    function back() {
        navigate(-1)
    }
    function forward() {
        navigate(1)
    }
    return (
        <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
                <h2>React Router Demo</h2>
                <button onClick={back}>👈后退</button>
                <button onClick={forward}>前进👉</button>
            </div>
        </div>
    )
}

其他的Hooks

`useInRouterContext()`

主要用于判断当前组件（一般组件和路由组件）是否处于路由的上下文环境中，即组件被BrowserRouter或HashRouter包裹（包括子组件），不在路由的上下文环境中，即脱离了路由器的管理

返回一个布尔值，处于路由的上下文环境中时返回真。

`useNavigationType()`

返回当前的导航类型

POP：在浏览器中直接打开或刷新页面
PUSH
REPLACE

`useOutlet()`

用来呈现当前组件中渲染的嵌套路由

console.log(useOutlet())
如果嵌套路由没有挂载，则输出null
如果嵌套路由已经挂载，则展示嵌套的路由对象

`useResolvedPath()`

给定一个URL值，解析其中的path、search、hash值

console.log(useResolvedPath('/user?id=01&name=abc&se=hi#goto'))

目录