10_React router6

前言：此处路由版本是 6.x ，点击此处可以跳转 5.x版本

一、概述

1、React Router 以三个不同的包发布到 npm 上，它们分别为：

1、react-router：路由的核心库，提供了很多的：组件、钩子
2、react-router-dom：包含 react-router 所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter> 等
3、react-router-native： 包括 react-router 所有内容，并添加一些专门用于 ReactNative 的 API，例如 <NativeRouter> 等

2、与 React Router 5.x 版本相比，改变了什么？

1、内置组件的变化：移除 <Switch />,新增 <Routes/>。
2、语法的变化： <component={About} /> 变成 element={<About/>} 等
3、新增多个 hook：useParams、useNavigate、useMatch等
4、官方明确推荐函数式组件了！！！

二、Component

1、BrowserRouter

1.1 说明

<BrowserRouter /> 用于包裹整个应用

1.2 示例代码

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

2、HashRouter

2.1 说明：

作用 与 <BrowserRouter /> 一样，但 <HashRouter />修改的是地址栏的 hash 值

2.2 备注：

6.x 版本中<BrowserRouter />和 <HashRouter />的用法跟 5.x 相同

3、<Routes/>与<Route>

1、V6 版本中移出了先前的 Switch ，引入了新的替代者：<Routes/>。
2、<Routes/>与<Route> 要配合适用，且必须要用 <Routes/>包裹<Route>。
3、<Route> 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。
4、<Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 false）。
5、当 URL 发生变化时，<Routes/>都会查看其所有子<Route>元素以找到最佳匹配并呈现组件。
6、<Route>也可以嵌套适用，且可配合 useRoutes()配置“路由表”，但需要通过<Outlet />组件来渲染其子路由, 详见代码【04_src_useRoutes 路由表】。

7、示例代码：

import './App.css'
import { NavLink, Routes, Route, Navigate } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
/**
 * Navigate 取代了react-router 5.x的 Redirect
 */

function App() {
  return (
    <div className="padding20">
      <h1>React Router Demo</h1>
      <div className="row">
        <div className="sidebar">
          <NavLink className="list-item" to="/about">
            About
          </NavLink>
          <NavLink className="list-item" to="/home">
            Home
          </NavLink>
        </div>
        <div className="panel">
          <Routes>
            <Route path="/about" element={<About />} />
            <Route path="/home" element={<Home />} />
            <Route path="/" element={<Navigate to="/about" />} />
          </Routes>
        </div>
      </div>
    </div>
  )
}

export default App

4、Link

4.1 作用：

修改 URL，且不发送网络请求（路由链接）

4.2 注意：

外侧需要用 BrowserRouter 或 HashRouter 包裹

4.3 示例代码：

import { Link } from 'react-router-dom'
function Test() {
  return (
    <div>
      <link to="/路径">按钮</Link>
    </div>
  )
}

5、NavLink

5.1 作用：

与 Link 组件相似，且可实现导航的 “高亮”效果

5.2 示例代码：

// 注意：NavLink 默认类名式 active， 下面式指定自定义的 class
// 自定义样式
<NavLink
  className={({ isActive }) => {
    return isActive ? 'list-item active' : 'list-item'
  }}
  to="/home"
>
  Home
</NavLink>
/**
 * 默认情况下，当 Home 的子组件匹配成功，Home 的导航也会高亮
 * 当 NavLink 上添加了 end 属性后，若 Home 的子组件匹配成功，则 Home 的导航没有高亮效果
 */
<NavLink to="/home" end>
  Home
</NavLink>

6、Navigate

6.1 作用：

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

6.2

replace 属性用于控制跳转模式（push 或 replace，默认是 push。值默认是 false）

6.3 示例代码：

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

export default function Home() {
  const [sum, setSum] = useState(0)
  return (
    <div>
      <h3> 我是 Home 组件</h3>
      {sum === 2 ? (
        <Navigate to="/about" replace={true} />
      ) : (
        <h4>当前 sum 的值是： {sum}</h4>
      )}
      <button
        onClick={() => {
          setSum(2)
        }}
      >
        点我将 sum 变成 2
      </button>
    </div>
  )
}

7、Outlet

1、当 Route 产生嵌套时，渲染其对应的后续子路由
2、示例代码看附件

三、Hooks

1、useRoutes()

1.1 作用：

根据路由表，动态创建 Routes 和 Route

1.2 示例代码：

// 路由表配置， src/router/index.js
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
import { Navigate } from 'react-router-dom'
// eslint-disable-next-line import/no-anonymous-default-export
export default [
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/home',
    element: <Home />,
    children: [
      {
        path: 'news',
        element: <News />,
      },
      {
        path: 'message',
        element: <Message />,
        children: [
          {
            path: 'detail',
            element: <Detail />,
          },
        ],
      },
    ],
  },
  {
    path: '/',
    element: <Navigate to="/home" />,
  },
]
// App.jsx

import './App.css'
import { NavLink, useRoutes } from 'react-router-dom'
import routers from './router'
import Header from './components/Header'
function App() {
  const elements = useRoutes(routers)
  return (
    <div className="padding20">
      <Header />
      <div className="row">
        <div className="sidebar">
          <NavLink className="list-item" to="/about">
            About
          </NavLink>
          <NavLink className="list-item" to="/home">
            Home
          </NavLink>
        </div>
        <div className="panel">{elements}</div>
      </div>
    </div>
  )
}

export default App

2、useNavigate()

2.1 作用：

返回一个函数用来实现编程式导航

2.2 示例代码：

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

export default function Message() {
  const [message] = useState([
    { id: 1, title: '消息1', content: '举头望明月' },
    { id: 2, title: '消息2', content: '低头思故乡' },
  ])
  const navigate = useNavigate()

  function showDetail(item) {
    navigate('detail', {
      replace: true,
      state: {
        id: item.id,
        title: item.title,
        content: item.content,
      },
    })
  }
  return (
    <ul>
      {message.map((el) => {
        return (
          <li key={el.id}>
            {/* 路由链接 */}
            <Link
              to="detail"
              state={{
                id: el.id,
                title: el.title,
                content: el.content,
              }}
            >
              {el.title}
            </Link>

            <button
              onClick={() => {
                showDetail(el)
              }}
            >
              查看详情
            </button>
          </li>
        )
      })}
      {/* 路由展示区域 */}
      <Outlet />
    </ul>
  )
}

3、useParams()

3.1 作用：

回当前匹配路由的 param 参数，类似于 5.x 中的 match.params。

3.2 示例代码：

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

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

  return (
    <div>
      <p>id: {id}</p>
      <p>标题: {title}</p>
      <p>详细内容: {content}</p>
    </div>
  )
}

4、useSearchParams()

4.1 作用：

用于读取和修改当前位置的 URL 中的查询字符串

4.2 返回一个包含两个值的数组，内容分别为：当前 search 参数，更新 search 的函数

4.3 示例代码：

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

export default function Detail() {
  console.log(useSearchParams())
  const [search, setSearch] = useSearchParams()
  console.log(search.get('id'), useLocation())
  return (
    <div>
      <button
        onClick={() => {
          setSearch('id=001&title=123&content=555')
        }}
      >
        点我更新一下收到的 search 参数
      </button>
      <p>id: {search.get('id')}</p>
      <p>标题: {search.get('title')}</p>
      <p>详细内容: {search.get('content')}</p>
    </div>
  )
}

5、useLocation()

5.1 作用：

获取当前 location 信息，对标 5.x 中的路由组件的 location 属性

5.2 示例代码：

import React from 'react'
import { useLocation } from 'react-router-dom'

export default function Detail() {
  const { state } = useLocation()
  console.log(state)
  return (
    <div>
      <p>id: {state.id}</p>
      <p>标题: {state.title}</p>
      <p>详细内容: {state.content}</p>
    </div>
  )
}

6、useMatch()

6.1 作用：

返回当前匹配信息，对标 5.x 中的路由组件的 match 属性

6.2 示例代码：

import React from 'react'
import { useMatch } from 'react-router-dom'

export default function Detail() {
  console.log(useMatch('/home/message/detail/:id/:title/:content'))
  /**
   * 
   {
    params:{x:"1", y:'10'},
    pathname:'/login/1/10',
    pattern: {
      path: '/login/:x/:y',
      CaseSensitive: false,
      end: false
    }
  }
   */
  return (
    <div>
      <p>id: {id}</p>
      <p>标题: {title}</p>
      <p>详细内容: {content}</p>
    </div>
  )
}

7、useInRouterContext()

7.1 作用：

判断是否用到路由

7.2 示例代码：

import './App.css'
import { NavLink, useRoutes, useInRouterContext } from 'react-router-dom'
import routers from './router'
import Header from './components/Header'
function App() {
  const elements = useRoutes(routers)
  console.log(useInRouterContext())
  return (
    <div className="padding20">
      <Header />
      <div className="row">
        <div className="sidebar">
          <NavLink className="list-item" to="/about">
            About
          </NavLink>
          <NavLink className="list-item" to="/home">
            Home
          </NavLink>
        </div>
        <div className="panel">{elements}</div>
      </div>
    </div>
  )
}

export default App

8、useNavigationType()

8.1 作用：

判断路由的类型， POP PUSH REPLACE
POP 是刷新当前页面会出现

8.2 示例代码：

import React from 'react'
import { useNavigationType } from 'react-router-dom'
export default function News() {
  console.log(useNavigationType())
  return (
    <ul>
      <li>11</li>
      <li>11</li>
      <li>11</li>
      <li>11</li>
    </ul>
  )
}

9、useOutlet()

9.1 作用：

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

9.2 示例代码：

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

export default function Home() {
  console.log(useOutlet())
  return (
    <>
      <h3> 我是 Home 组件</h3>
      <div className="sidebar2">
        <NavLink className="list-item" to="news">
          news
        </NavLink>
        <NavLink className="list-item" to="message">
          Message
        </NavLink>
      </div>
      {/* 指定路由组件呈现的位置 */}
      <Outlet />
    </>
  )
}

10、useResolvedPath()

10.1 作用：

给定一个 URL 值，解析其中的 path、search、hash 值
可以输入任意路径地址，不是当前系统的也可以

10.2 示例代码：

import React from 'react'
import { useResolvedPath } from 'react-router-dom'
export default function News() {
  console.log('@@', useResolvedPath('xxx.com?id=12&title=888'))
  return (
    <ul>
      <li>11</li>
      <li>11</li>
      <li>11</li>
      <li>11</li>
    </ul>
  )
}