react 路由跳转传参

### React Router 传参方法

#### 动态路由参数 (Path Parameters)

通过定义路径中的占位符来捕获 URL 中的部分作为参数。例如，在路径 `/user/:id` 中，`:id` 就是一个动态部分。

// 定义路由
<Route path="/users/:userId" element={<User />} />

// 获取参数
import { useParams } from "react-router-dom";

function User() {
    let { userId } = useParams();
    return <h2>User ID: {userId}</h2>;
}

这种方式适用于当希望从 URL 地址栏中获取特定片段并将其作为参数传递给组件的情况[^1]。

#### 查询字符串 (Query String)

查询字符串是一种附加在URL后面的信息形式，通常用来携带页面请求的数据。可以利用 `useSearchParams` 钩子读取这些数据：

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

function MailList() {
    let [searchParams, setSearchParams] = useSearchParams();

    function handleSearch(e) {
        e.preventDefault();
        setSearchParams({ q: e.target.elements.q.value });
    }

    return (
        <>
            <form onSubmit={handleSearch}>
                <input type="text" name="q" />
                <button>搜索</button>
            </form>

            {/* 显示结果 */}
        </>
    );
}

此法适合于过滤器、分页等功能场景下使用[^3]。

#### 状态对象 (State Object)

对于更复杂的数据结构或不想暴露在 URL 上面的内容，则可以通过状态对象来进行跨页面间通信:

<Link to={{
    pathname: "/courses",
    search: "?sort=name", // 可选的查询串
    state: { fromDashboard: true }
}}>Courses</Link>

// 或者编程式的导航
navigate("/home", { replace: true, state: { user: userObject } });

// 接收端接收state
let location = useLocation();
console.log(location.state);

这种方法非常适合处理敏感信息或是较大规模的对象传输需求[^2]。