编程式导航

一、 useNavigate

在组件中（逻辑代码）通过编程方式进行路由导航（在 ）。

import { useNavigate } from 'react-router';

function Button() {
  const navigate = useNavigate();

  const goHome = () => navigate('/home');
  const goBack = () => navigate(-1);
  // 替换当前路由为 "/about"，这将使得使用浏览器的回退按钮是回到上一页面，而非当前页面
  const replaceToAbout = () => navigate('/about', { replace: true });

  return <button onClick={goHome}>回首页</button>;
}

二、 获取路由参数

1. useParams

获取动态路由参数，如 /user/:userId 中的 userId

import { useParams } from 'react-router';

function UserProfile() {
  const { userId } = useParams();
  return <div>用户 ID：「{userId}」</div>;
}

2. useSearchParams

获取查询参数，如 /search?q=earthnut 中的 q

import { useSearchParams } from 'react-router';

function Search() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');
  // 修改查询参数（保留其他参数）
  const updateQuery = newQ => setSearchParams({ q: newQ });

  return <div>搜索词汇：「{query}」</div>;
}

3. useLocation

获取当前 URL 的信息，如路径、查询参数、状态等。

import { useLocation } from 'react-router';

function Analytics() {
  const location = useLocation();
  const _ = console.log;
  _('查询的路径：', location.pathname);
  _('查询的参数：', location.search);
  _('传递的状态：', location.state);
  return null;
}