React-router v6 版本记录
前言：router从v5 -> v6的变更，导致介绍v5版本的文章对于v6简直没用；因为我在海量的水文中极难找到一篇兼具实时性、有效性的文章；于是本人想写一些react-router的应用记录，把本人见到的、用到的记录下来；正如题目所示，仅仅是集体记录，及供参考，如果有补充或者谬误，欢送斧正。
标注：我没有用过v5版本，react也是刚学
组件
BrowserRouter、HashRouter
前者是history模式，即导航栏中没有#，后者是hash模式，； 路由的根组件，提供路由上下文，通常放在我的项目的入口文件，作为外层的组件。
二者的属性定义相似
interface BrowserRouterProps / HashRouterProps { basename?: string; // 即最根底的根门路，通常就是'/' children?: React.ReactNode; window?: Window;}Link
路由跳转组件，应用useNavigate代替v5的useHistory；v5版本的useHistory会返回一个对象，对象具备操作浏览历史的一些属性，例如push
属性定义：interface LinkProps { reloadDocument?: boolean; replace?: boolean; state?: any; to: To;}例子：import React from 'react'import { Link } from "react-router-dom"import { useNavigate } from "react-router-dom";export default function Menu() { const history = useNavigate() const handleJump = () => { history('student') } return ( <div className='menu'> <li> {/* <Link to={'/student'}>学生列表</Link> */} <a onClick={handleJump} style={{ cursor: 'pointer' }}>学生列表</a> </li> <li> <Link to={'/student/add'}>增加学生</Link> </li> </div> )}useNavigate
- 自身是一个函数
- 返回值是一个函数，这里用history示意
history承受两种参数类型
第一种：(to: To, options?: NavigateOptions): void;
option配置:
- replace?: boolean; 是否替换以后页面
- state?: any; 页面信息
- 第二种：(delta: number): void; 【没试过，感觉第一种应用会更多】
Routes、route
应用routes包裹一些route，route代表依据url地址切换的显示页面，routes相似于v5的switch
<Routes> <Route exact path="/" element={<Welcome />} /> <Route exact path="/student" element={<StudentList />} /></Routes>element:页面切换真正显示的组件，v5应用的是component或render，v6应用element属性代替
- 值得注意的是，v5的component属性值，类型为
React.ComponentType，而v6的element属性值类型为React.ReactNode；v5传递组件类型，v6须要传递一个组件。
- 值得注意的是，v5的component属性值，类型为