react-router-dom V6

1、

2、常用 hooks

useNavigate

作用: 用于编程式导航

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate('/path');           // 导航到指定路径
navigate(-1);                // 后退
navigate(1);                 // 前进

useLocation

作用: 获取当前路由的 location 对象

import { useLocation } from 'react-router-dom';

const location = useLocation();
console.log(location.pathname);  // 当前路径
console.log(location.search);    // 查询参数

useParams

作用: 获取路由参数

import { useParams } from 'react-router-dom';

// 路由: /users/:id
const { id } = useParams();  // 获取参数 id
  

useSearchParams

作用: 读取和修改 URL 查询参数

import { useSearchParams } from 'react-router-dom';

const [searchParams, setSearchParams] = useSearchParams();
const paramValue = searchParams.get('key');
setSearchParams({ key: 'value' });
  

useMatches

作用: 获取当前匹配的路由信息数组

import { useMatches } from 'react-router-dom';

const matches = useMatches();
const currentRoute = matches[matches.length - 1];

useLoaderData

作用: 获取路由 loader 函数返回的数据

import { useLoaderData } from 'react-router-dom';
const data = useLoaderData();
  

useActionData

作用: 获取路由 action 函数返回的数据

import { useActionData } from 'react-router-dom';

const actionResult = useActionData();
  

useOutlet

作用: 渲染子路由的 element

import { useOutlet } from 'react-router-dom';

const outlet = useOutlet();
  

useOutletContext

作用: 获取父路由通过 Outlet 传递的上下文

import { useOutletContext } from 'react-router-dom';

const context = useOutletContext<ContextType>();
  

useBlocker

作用: 阻止导航，用于页面离开确认

import { useBlocker } from 'react-router-dom';

useBlocker(({ currentLocation, nextLocation }) => {
return true; // 阻止导航
});