如何在React Router中传递参数？

在 React Router 中，有多种方式可以传递参数，下面以 React Router v6 为例进行详细介绍：

1. 动态路由参数

动态路由参数是指在路由路径中使用占位符来表示可变的部分，这些占位符会被实际的值替换。

1.1 定义动态路由

在 Routes 组件中，使用 :参数名 的形式来定义动态路由。例如，定义一个用于显示用户信息的路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import UserProfile from './UserProfile';

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/users/:userId" element={<UserProfile />} />
            </Routes>
        </Router>
    );
};

export default App;

在上述代码中，:userId 就是一个动态路由参数，它可以匹配任意字符串。

1.2 获取动态路由参数

在目标组件中，可以使用 useParams 钩子来获取动态路由参数。例如，在 UserProfile 组件中获取 userId：

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

const UserProfile = () => {
    const { userId } = useParams();

    return (
        <div>
            <h1>用户 ID: {userId}</h1>
        </div>
    );
};

export default UserProfile;

1.3 导航到动态路由

可以使用 Link 组件或 useNavigate 钩子来导航到包含动态路由参数的路径。

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

// 使用 Link 组件
const NavLink = () => {
    return (
        <Link to="/users/123">查看用户 123 的信息</Link>
    );
};

// 使用 useNavigate 钩子
const NavButton = () => {
    const navigate = useNavigate();

    const handleClick = () => {
        navigate('/users/456');
    };

    return (
        <button onClick={handleClick}>查看用户 456 的信息</button>
    );
};

2. 搜索参数

搜索参数是指 URL 中问号后面的部分，通常用于传递一些可选的参数。

2.1 传递搜索参数

可以在 Link 组件的 to 属性中使用对象形式来传递搜索参数，也可以在 useNavigate 钩子中使用 search 选项来传递。

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

// 使用 Link 组件传递搜索参数
const SearchLink = () => {
    return (
        <Link to={
  { pathname: '/search', search: '?keyword=react' }}>搜索 React</Link>
    );
};

// 使用 useNavigate 钩子传递搜索参数
const SearchButton = () => {
    const navigate = useNavigate();

    const handleClick = () => {
        navigate({ pathname: '/search', search: '?keyword=javascript' });
    };

    return (
        <button onClick={handleClick}>搜索 JavaScript</button>
    );
};

2.2 获取搜索参数

在目标组件中，可以使用 useSearchParams 钩子来获取搜索参数。

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

const SearchResults = () => {
    const [searchParams] = useSearchParams();
    const keyword = searchParams.get('keyword');

    return (
        <div>
            <h1>搜索关键词: {keyword}</h1>
        </div>
    );
};

export default SearchResults;

3. 状态参数

状态参数是一种在导航时传递数据的方式，这些数据不会显示在 URL 中。

3.1 传递状态参数

可以在 Link 组件的 to 属性中使用对象形式来传递状态参数，也可以在 useNavigate 钩子中使用 state 选项来传递。

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

// 使用 Link 组件传递状态参数
const StateLink = () => {
    return (
        <Link to={
  { pathname: '/profile', state: { message: '欢迎访问个人资料' } }}>查看个人资料</Link>
    );
};

// 使用 useNavigate 钩子传递状态参数
const StateButton = () => {
    const navigate = useNavigate();

    const handleClick = () => {
        navigate({ pathname: '/profile', state: { message: '这是一条秘密消息' } });
    };

    return (
        <button onClick={handleClick}>查看个人资料</button>
    );
};

3.2 获取状态参数

在目标组件中，可以使用 useLocation 钩子来获取状态参数。

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

const Profile = () => {
    const location = useLocation();
    const message = location.state?.message;

    return (
        <div>
            <h1>个人资料</h1>
            {message && <p>{message}</p>}
        </div>
    );
};

export default Profile;

通过以上三种方式，你可以在 React Router 中灵活地传递和获取参数，以满足不同的业务需求。