10_React router6

[前言：此处路由版本是 6.x ，[点击此处可以跳转 5.x版本](https://blog.csdn.net/qq_46143850/article/details/141962404)](#前言：此处路由版本是 6.x ，点击此处可以跳转 5.x版本)
一、概述
- [1、React Router 以三个不同的包发布到 npm 上，它们分别为：](#1、React Router 以三个不同的包发布到 npm 上，它们分别为：)
- [2、与 React Router 5.x 版本相比，改变了什么？](#2、与 React Router 5.x 版本相比，改变了什么？)
二、Component
- 1、BrowserRouter
- - [1.1 说明](#1.1 说明)
  - [1.2 示例代码](#1.2 示例代码)
- 2、HashRouter
- - [2.1 说明：](#2.1 说明：)
  - [2.2 备注：](#2.2 备注：)
- 3、``与`<Route>`
- 4、Link
- - [4.1 作用：](#4.1 作用：)
  - [4.2 注意：](#4.2 注意：)
  - [4.3 示例代码：](#4.3 示例代码：)
- 5、NavLink
- - [5.1 作用：](#5.1 作用：)
  - [5.2 示例代码：](#5.2 示例代码：)
- 6、Navigate
- - [6.1 作用：](#6.1 作用：)
  - 6.2
  - [6.3 示例代码：](#6.3 示例代码：)
- 7、Outlet
三、Hooks
- 1、useRoutes()
- - [1.1 作用：](#1.1 作用：)
  - [1.2 示例代码：](#1.2 示例代码：)
- 2、useNavigate()
- - [2.1 作用：](#2.1 作用：)
  - [2.2 示例代码：](#2.2 示例代码：)
- 3、useParams()
- - [3.1 作用：](#3.1 作用：)
  - [3.2 示例代码：](#3.2 示例代码：)
- 4、useSearchParams()
- - [4.1 作用：](#4.1 作用：)
  - [4.2 返回一个包含两个值的数组，内容分别为：当前 search 参数，更新 search 的函数](#4.2 返回一个包含两个值的数组，内容分别为：当前 search 参数，更新 search 的函数)
  - [4.3 示例代码：](#4.3 示例代码：)
- 5、useLocation()
- - [5.1 作用：](#5.1 作用：)
  - [5.2 示例代码：](#5.2 示例代码：)
- 6、useMatch()
- - [6.1 作用：](#6.1 作用：)
  - [6.2 示例代码：](#6.2 示例代码：)
- 7、useInRouterContext()
- - [7.1 作用：](#7.1 作用：)
  - [7.2 示例代码：](#7.2 示例代码：)
- 8、useNavigationType()
- - [8.1 作用：](#8.1 作用：)
  - [8.2 示例代码：](#8.2 示例代码：)
- 9、useOutlet()
- - [9.1 作用：](#9.1 作用：)
  - [9.2 示例代码：](#9.2 示例代码：)
- 10、useResolvedPath()
- - [10.1 作用：](#10.1 作用：)
  - [10.2 示例代码：](#10.2 示例代码：)

前言：此处路由版本是 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 示例代码

jsx 复制代码

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、示例代码：

jsx 复制代码

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 示例代码：

jsx 复制代码

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

5、NavLink

5.1 作用：

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

5.2 示例代码：

jsx 复制代码

// 注意：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 示例代码：

jsx 复制代码

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 示例代码：

jsx 复制代码

// 路由表配置， 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 示例代码：

jsx 复制代码

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 示例代码：

jsx 复制代码

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 示例代码：

jsx 复制代码

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 示例代码：

jsx 复制代码

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 示例代码：

jsx 复制代码

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 示例代码：

jsx 复制代码

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 示例代码：

jsx 复制代码

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 示例代码：

jsx 复制代码

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 示例代码：

jsx 复制代码

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

10_React router6

10_React router6

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

一、概述

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

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

二、Component

1、BrowserRouter

1.1 说明

1.2 示例代码

2、HashRouter

2.1 说明：

2.2 备注：

3、<Routes/>与<Route>

4、Link

4.1 作用：

4.2 注意：

4.3 示例代码：

5、NavLink

5.1 作用：

5.2 示例代码：

6、Navigate

6.1 作用：

6.2

6.3 示例代码：

7、Outlet

三、Hooks

1、useRoutes()

1.1 作用：

1.2 示例代码：

2、useNavigate()

2.1 作用：

2.2 示例代码：

3、useParams()

3.1 作用：

3.2 示例代码：

4、useSearchParams()

4.1 作用：

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

4.3 示例代码：

5、useLocation()

5.1 作用：

5.2 示例代码：

6、useMatch()

6.1 作用：

6.2 示例代码：

7、useInRouterContext()

7.1 作用：

7.2 示例代码：

8、useNavigationType()

8.1 作用：

8.2 示例代码：

9、useOutlet()

9.1 作用：

9.2 示例代码：

10、useResolvedPath()

10.1 作用：

10.2 示例代码：

3、`<Routes/>`与`<Route>`