React 路由 V6

概述

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

安装路由

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

npm i react router dom

方法二

npm i [email protected] --save

引入

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

路由的使用

组成部分：，， 与 ，，，，

HashRouter

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

BrowserRouter

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

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

Routes 与 Route

Routes 与 Route：Route 是路由配置的具体实现，它置顶当路径匹配的时候渲染哪一个 UI
要与 一起使用，前者包裹后者
属性用于指定：匹配时是否