【React】 react路由

这一篇文章的重点在于将React关于路由的问题都给搞清楚。
一个路由就是一个映射关系，key:value。key是路径，value 可能是function或者component。
安装react-router-dom包使用路由服务，我这里想要用的是6版本的包，因此后面加”@6"

npm install react-router-dom@6

首先要介绍的是HashRouter和BrowserRouter，这两个组件的作用在于提供一个路由环境，方便在后续React应用程序中使用路由服务。

一、HashRouter和BrowserRouter之间的区别

HashRouter和BrowserRouter之间的区别主要表现在两个方面，一个是表现形式，一个是工作原理。

1. URL表现形式

BrowserRouter的url没有#符号。例如：http://example.com/about
HashRouter的url中包含了一个#符号，该符号后面是hash部分，不会发送到服务器。 例如：http://example.com/#/about

2. 工作原理

对于HashRouter来说，它不需要在服务器中对相应的路由进行配置，它监听hashchange事件，根据hash的变化渲染对应的组件。
对于BrowserRouter来说，他使用Html5中的History api来实现路由。因为不是hash段所以会向服务器端发送请求，需要在服务器中进行相应的配置，均返回index.html网站即可。

跟这两个类似的还有一个MemoryRouter，这里暂不介绍。

上述内容是用来包裹react应用的，使React应用支持路由服务

二、NavLink、Link、Routes和Route

Routes是路由器组，Route必须要用它包裹才能用，Routes的作用是包括Route包裹路由，Route的作用是将组件放在所要定义的位置。

<Routes>
    <Route path="/home" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/" element={<Navigate to="/home" />} />
</Routes>

NavLink与Link按钮之间的区别在于，如果NavLink被点击之后会增加一个active的类名，可以被设置相应的样式，而link没有。
Link与NavLink的作用就相当于是人告诉界面我要显示哪个组件，然后Route的作用是去找组件。

<div>
    <NavLink to="/about">About</NavLink>
    <NavLink to="/home">Home</NavLink>
</div>

上述内容如下图所示。

三、 useRoutes、路由表、Outlet

路由表
RouteObject

目前在使用的过程中我只使用了path、children、caseSensitive、element四个基本的配置项。
Index.tsx中定义路由表

import React from "react";
import About from "../components/About";
import Home from "../components/Home";
import News from "../components/News";
import Message from "../components/Message";
import {
    Navigate } from "react-router-dom";
 
const routes: any[] = [
  {
   
    path: "/about",
    element: <About />,
  },
  {
   
    path: "/home",
    element: <Home />,
    children: [
      {
   
        path: "news",
        element: <News />,
      },
      {
   
        path: "message",
        element: <Message />,
      },
    ],
  },
  {
   
    path: "/",
    ele