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属性值,类型为
发表回复