超超详细ReactRouter v6版本的基本使用

先附上官网的地址：react-router-v6 · GitHub Topics · GitHub

一.概述

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. 说明：<BrowserRouter>用于包裹整个应用。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    {/* 整体结构（通常为App组件） */}
  </BrowserRouter>
);

---

2. <HashRouter>

1. 说明：作用与<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。

2. 备注：6.x版本中<HashRouter>、<BrowserRouter> 的用法与 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> 组