React ReactRouter6、组件的调整、hooks(笔记)

1. 路由相关组件的调整

• Switch 改为 Routes：改变路由匹配规则
  • 区别： 在原有的基础上添加了一条，Routes 必须要嵌套
• Route：注册路由
  • 区别： 移除了 component，添加了 element 属性
  • 用法：<Route path="/demo" element={<Demo />} />
  • 新增属性：caseSensitive 严格匹配，区分大小写
• Navigate：路由重定向
  • 区别：组件都更改了
  • 用法：<Route path="/" element={<Navigate to="/demo" />} />
• NavLink：加强版路由跳转
  • 区别：移除了 activeClassName 属性，className 值为一个回调
  • 用法：<NavLink className={({isActive}) => { isActive ? "active" : "" }}> Demo </NavLink>
  • 新增属性：end 子集路由如果匹配，自己失去高亮

2. hooks

2.1 useRoutes

// useRoutes：注册路由表
// Outlet：路由展示位置
// NavLink：路由跳转
import { useRoutes, Outlet, NavLink } from "react-router-dom"

const routes = useRoutes([
  {
	path: "/about",
	element: <About />
  },
  {
	path: "/home",
	element: <Home />
	children: [
	  {
	    // 路径不需要再加 /
		path: "new",
		element: <New />
	  },
	  {
		path: "msg",
		element: <Msg />
	  },
	]
  },
  {
	path: "/",
	element: <Navigate to="/about" />
  },
])

function App() {
  return (
	<div>
	  // 一级路由跳转
	  <NavLink to="/about"> About </NavLink> 
	  // 直接使用就可以了
	  {routes}
	</div>
  )
}

function Demo() {
  return (
	<div>
	  // 二级路由跳转，路径不能加 / 了
	  <NavLink to="new"> New </NavLink> 
	  // 指定路由展示的位置
	  <Outlet /> 
	</div>
  )
}

2.2 useParams、useMatch

import { useParams, useMatch } from "react-router-dom"

function Demo() {
  // 接收传入的 params 参数
  const params = useParams()
  // 这种方式不常用
  const { params } = useMatch("完整路径")
}

2.3 useSearchParams、useLocation

import { useSearchParams, useLocation } from "react-router-dom"

function Demo() {
  // search：接收传入的参数，需要 get 的方式获取
  // setSearch：参数可修改
  const [ search, setSearch ] = useSearchParams()
  let id = search.get("id")
  let name = search.get("name")

  // 返回 location 对象，包含 search、state 等
  let search = useLocation()
}

2.4 useNavigate 编程式路由

import { useNavigate } from "react-router-dom"

const navigate = useNavigate()
// 多级路由不能加 /
navigate("/about", {
  replace: false,
  state: { }
})

navigate(n)

2.5 useInRouterContext

• 判断当前组件是否为路由组件，返回布尔值

2.6 useNavigationType

• 作用：返回当前的导航类型，用户是如何来到当前页面的
• 返回值：POP、PUSH、REPLACE
• 备注：POP 是指当前页面的刷新，或者浏览器打开就是这个页面

2.7 useOutlet

• 返回已挂载的子路由对象

2.8 useResolvedPath

• 给定一个 URL 值，解析其中的 path、search、hash 值