React Router 路由参数、查询参数与状态参数的使用

在 React 中，使用 React Router 进行路由管理时，可以通过 useParams、useLocation 和 useHistory（或 useNavigate，取决于 React Router 版本）等钩子函数来获取路由参数、查询参数和状态参数。以下是这些钩子函数的使用方法：

1. useParams - 获取路由参数

useParams 用于获取动态路由参数。例如，如果你有一个路由 /user/:id，你可以通过 useParams 获取 id 参数。

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

function UserDetail() {
  const { id } = useParams();

  return (
    <div>
      <h1>User ID: {id}</h1>
    </div>
  );
}

2. useLocation - 获取查询参数和状态参数

useLocation 返回当前路由的 location 对象，其中包含 search 和 state 属性。search 是查询字符串，state 是路由跳转时传递的状态。

获取查询参数

你可以使用 URLSearchParams 来解析查询字符串。

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

function UserList() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const name = queryParams.get('name');

  return (
    <div>
      <h1>User List</h1>
      <p>Name: {name}</p>
    </div>
  );
}

获取状态参数

location.state 可以获取通过 navigate 或 Link 传递的状态。

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

function UserDetail() {
  const location = useLocation();
  const user = location.state?.user;

  return (
    <div>
      <h1>User Detail</h1>
      <p>Name: {user?.name}</p>
      <p>Age: {user?.age}</p>
    </div>
  );
}

3. useNavigate - 导航并传递状态参数

useNavigate 是 React Router v6 中用于导航的钩子函数。你可以使用它来跳转到其他路由并传递状态参数。

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

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

  const handleClick = () => {
    navigate('/user/123', { state: { user: { name: 'John', age: 30 } } });
  };

  return (
    <div>
      <h1>User List</h1>
      <button onClick={handleClick}>Go to User Detail</button>
    </div>
  );
}

4. useSearchParams - 获取和设置查询参数

useSearchParams 是 React Router v6 中用于获取和设置查询参数的钩子函数。

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

function UserList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const name = searchParams.get('name');

  const handleChange = (event) => {
    setSearchParams({ name: event.target.value });
  };

  return (
    <div>
      <h1>User List</h1>
      <input type="text" value={name || ''} onChange={handleChange} />
      <p>Name: {name}</p>
    </div>
  );
}

总结

• useParams：获取动态路由参数。
• useLocation：获取查询参数和状态参数。
• useNavigate：导航并传递状态参数。
• useSearchParams：获取和设置查询参数。

这些钩子函数可以帮助你在 React 应用中更灵活地处理路由参数、查询参数和状态参数。