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 须要传递一个组件。

临时这么多……