重学React之 React Router V6版本

获取params数据

import { useParams } from "react-router-dom"
const params = useParams()
console.log(params.id)
注意：需要配合对应的动态路由参数  /about/:id

获取query数据

import { useSearchParams } from "react-router-dom"
const [params,setParams] = useSearchParams()
console.log(params.get('id')) // 有很多api可以使用 如：append、has、toString、keys、values、entries、append、delete、forEach、getAll、has、set、sort；
setParams(serializeFormQuery) // 可以提交序列化表单

Outlet传参

// 父组件
type ContextType = { info: any | null };
// 定义数据
const [info, setInfo] = useState({name: 'bear'});
// Outlet组件通过context属性传递数据
<Outlet context={{info}}/>

// 导出use函数
export function useInfo() {
  return useOutletContext<ContextType>();
}

--------------------------------------------

// 通过Outlet展示的路由子组件
import { useInfo } from "../../Layout";
const { useInfo } = useInfo()
console.log(userInfo)

路由跳转、获取当前路由path等信息

import { useNavigate, useLocation } from "react-router-dom";
const location = useLocation() // location基本信息

const navgate = useNavigate()
navgate('/about'); // 跳转到/about
navgate(-1) // 后退
navgate(1) // 前进
navgate('../') // 路由去掉一级
navgate('/about',{replase: false,state:{title:'abc'}}) 
// 相当于v5中history.replace()，并同时传入state,state可以在跳转后的useLocation()返回值找