React Router v6中组件传参有哪些方法？如何实现参数传递与接收

React Router v6是目前React生态中主流的路由管理库，在单页应用开发中，经常需要在路由跳转时向目标组件传递参数，v6版本提供了多种成熟的传参方案，适配不同的业务场景。

动态路由参数传参

动态路由参数是最常用的传参方式，适合传递必填的、与资源标识相关的参数，比如用户ID、商品ID等。首先在路由配置中定义带参数的路由规则，参数用冒号加参数名表示。

// 路由配置示例
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import UserDetail from "./UserDetail";

const router = createBrowserRouter([
  {
    path: "/user/:userId",
    element: <UserDetail />
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

跳转时只需要在路径中填入对应的参数值即可，目标组件通过<code>useParams</code>钩子获取参数，该钩子返回的是一个对象，键名就是路由中定义的参数名。

// UserDetail组件接收参数
import { useParams } from "react-router-dom";

function UserDetail() {
  const params = useParams();
  // 获取userId参数
  const userId = params.userId;
  return (
    <div>
      <h3>用户详情页</h3>
      <p>当前用户ID：{userId}</p>
    </div>
  );
}

export default UserDetail;

查询参数传参

查询参数适合传递可选参数、筛选条件等非必填信息，参数会拼接在路由路径的问号后面，格式为key=value，多个参数用&连接。v6版本使用<code>useSearchParams</code>钩子来处理查询参数，它的返回值类似useState，第一个值是查询参数对象，第二个值是更新参数的方法。

跳转时可以通过<code>Link</code>组件的to属性拼接查询参数，也可以直接在路径中写入查询字符串。

// 跳转时传递查询参数
import { Link } from "react-router-dom";

function UserList() {
  return (
    <div>
      <h3>用户列表</h3>
      {/* 跳转到用户详情页，传递查询参数type=admin */}
      <Link to="/user/123?type=admin">查看管理员用户</Link>
    </div>
  );
}

export default UserList;

目标组件中通过<code>useSearchParams</code>获取查询参数，获取时需要调用get方法传入参数名。

// UserDetail组件接收查询参数
import { useParams, useSearchParams } from "react-router-dom";

function UserDetail() {
  const params = useParams();
  const [searchParams, setSearchParams] = useSearchParams();
  const userId = params.userId;
  // 获取查询参数type
  const userType = searchParams.get("type");
  return (
    <div>
      <h3>用户详情页</h3>
      <p>用户ID：{userId}</p>
      <p>用户类型：{userType || "普通用户"}</p>
      <button onClick={() => setSearchParams({ type: "vip" })}>修改为VIP用户</button>
    </div>
  );
}

export default UserDetail;

路由状态传参

路由状态传参适合传递不需要显示在地址栏中的参数，比如复杂的对象、敏感信息等。跳转时可以在<code>Link</code>的to对象中设置state属性，或者通过导航函数的state参数传递。

// 通过Link传递路由状态
import { Link } from "react-router-dom";

function UserList() {
  const userInfo = {
    name: "张三",
    age: 25,
    email: "test@ipipp.com"
  };
  return (
    <div>
      <h3>用户列表</h3>
      {/* 传递state状态 */}
      <Link to="/user/123" state={userInfo}>查看用户张三</Link>
    </div>
  );
}

export default UserList;

目标组件通过<code>useLocation</code>钩子获取传递的状态，state属性就是跳转时传递的内容。

// 接收路由状态
import { useParams, useLocation } from "react-router-dom";

function UserDetail() {
  const params = useParams();
  const location = useLocation();
  const userId = params.userId;
  // 获取传递的state
  const userInfo = location.state || {};
  return (
    <div>
      <h3>用户详情页</h3>
      <p>用户ID：{userId}</p>
      <p>用户姓名：{userInfo.name}</p>
      <p>用户年龄：{userInfo.age}</p>
    </div>
  );
}

export default UserDetail;

不同传参方式对比

三种传参方式各有适用场景，开发者可以根据实际需求选择：

注意事项

• 动态路由参数如果定义了就必须传递，否则路由无法匹配，若参数可选可以在参数名后加问号，比如/user/:userId?
• 查询参数如果包含中文或特殊字符，建议使用encodeURIComponent编码后再传递，避免乱码问题
• 路由状态在页面刷新后仍然存在，但如果用户手动修改地址栏跳转，state会丢失，重要参数建议优先使用动态路由或查询参数传递
• 不要在路由状态中传递过大的数据，避免影响路由性能

React_Router_v6组件传参路由参数useParamsuseSearchParams修改时间：2026-06-28 15:06:30