react-router

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 (
    

      

        {/* 学生列表 */}
        学生列表
      
      

        添加学生
      
    
  )
}

• 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

    } />
    } />

• element:页面切换真正显示的组件，v5使用的是component或render，v6使用element属性代替

  • 值得注意的是，v5的component属性值，类型为React.ComponentType，而v6的element属性值类型为React.ReactNode；v5传递组件类型，v6需要传递一个组件。

暂时这么多……