React 路由 V6

概述

与 React Router 5.x 的区别：
内置组件的变化：移除 <Switch/> ，新增<Routers> 等
语法的变化：component = {Home}，element = {<Home/>} 等
新增多个hook：useParams、useNavigate、useMatch 等

安装路由

安装(@6.3.0 最新版本)
方法一

npm i react router dom

方法二

npm i react-router-dom@6.3.0 --save

引入

import {
   BrowserRouter,HashRouter,Routes,Route,link} from 'react-router-dom'

路由的使用

组成部分：<HashRouter>，<BrowserRouter>，<Routes/> 与 <Route>，<Link>，<NavLink>，<Navigate>，<Outlet>

HashRouter

<!-- 路由模型，HashRouter hash模型 -->
<HashRouter></HashRouter>

BrowserRouter

BrowserRouter：封装了 history 的创建，不需要再自己创建 history 对象。用于包裹整个应用

<!-- 路由模型，BrowserRouter history模型 -->
<BrowserRouter>
...
</BrowserRouter>

Routes 与 Route

Routes 与 Route：Route 是路由配置的具体实现，它置顶当路径匹配的时候渲染哪一个 UI
<Router> 要与 <Route> 一起使用，前者包裹后者
<Route index > 属性用于指定：匹配时是否为默认路由
<Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 > false）
<Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。

<Routes>
        <!-- Route组件 路由规则 -->
        <!-- Navigate 实现重定向 -->
        <Route path