react的router_link怎么加参数

React Router Link 传参完全指南：从基础到实战

导语

在 React 单页应用开发中，路由管理是核心功能之一。React Router 作为最流行的路由解决方案，其 <Link> 组件的参数传递是开发者必须掌握的技能。本文将全面剖析 React Router Link 传参的各种方式，通过真实代码示例展示不同场景下的最佳实践，帮助你在项目中优雅地实现路由间数据传递。

核心概念解释

React Router 提供了两种主要的参数传递方式：

查询参数（Query Parameters）：通过 URL 的 ? 后附加键值对
路径参数（Path Parameters）：直接嵌入在 URL 路径中的变量
状态参数（State）：通过内存传递，不会显示在 URL 中

使用场景对比

传参方式	适用场景	可见性	刷新保留
查询参数	筛选条件、分页信息	URL可见	是
路径参数	资源ID、固定结构的参数	URL可见	是
状态参数	复杂对象、敏感信息	URL不可见	否

基础传参方法

1. 查询参数传参

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

// 传递参数
<Link to="/user?name=张三&age=25">用户信息</Link>

// 接收参数（在目标组件中）
import { useLocation } from 'react-router-dom';

function UserPage() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const name = searchParams.get('name'); // "张三"
  const age = searchParams.get('age');   // "25"

  return <div>{name} - {age}岁</div>;
}

2. 路径参数传参

首先需要配置路由：

<Route path="/user/:id" component={UserDetail} />

然后使用 Link 传递：

<Link to="/user/123">用户详情</Link>

在目标组件中接收：

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

function UserDetail() {
  const { id } = useParams(); // 123
  return <div>用户ID: {id}</div>;
}

3. 状态参数传参

<Link 
  to="/dashboard" 
  state={{ 
    from: 'homepage', 
    timestamp: Date.now() 
  }}
>
  控制面板
</Link>

接收状态：

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

function Dashboard() {
  const location = useLocation();
  const { from, timestamp } = location.state || {};

  return (
    <div>
      来自: {from}, 时间: {new Date(timestamp).toLocaleString()}
    </div>
  );
}

高级技巧

动态生成带参链接

function generateUserLink(user) {
  return {
    pathname: `/user/${user.id}`,
    search: `?role=${user.role}`,
    state: { userData: user }
  };
}

// 使用
<Link to={generateUserLink(currentUser)}>个人中心</Link>

TypeScript 类型支持

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

interface UserLinkState {
  from: string;
  prefetchData: UserProfile;
}

const userLink: To = {
  pathname: '/user/123',
  state: {
    from: 'admin',
    prefetchData: userProfile
  } as UserLinkState
};

<Link to={userLink}>用户(TS)</Link>

实战案例：电商产品列表到详情页

场景描述

从产品列表页点击产品卡片，跳转到详情页时需要传递： - 产品ID（路径参数） - 当前筛选条件（查询参数） - 产品简要信息（状态参数，用于详情页立即显示）

实现代码

// 产品卡片组件
function ProductCard({ product, currentFilters }) {
  return (
    <Link
      to={{
        pathname: `/products/${product.id}`,
        search: `?category=${currentFilters.category}&sort=${currentFilters.sort}`,
        state: { 
          preview: product 
        }
      }}
      className="product-card"
    >
      <img src={product.thumbnail} alt={product.name} />
      <h3>{product.name}</h3>
      <p>¥{product.price}</p>
    </Link>
  );
}

// 产品详情页组件
function ProductDetail() {
  const { id } = useParams();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const { preview } = location.state || {};

  const category = searchParams.get('category');
  const sort = searchParams.get('sort');

  // 可以立即显示预览数据，同时请求完整数据
  return (
    <div className="product-detail">
      {preview && (
        <div className="preview-section">
          <h1>{preview.name}</h1>
          <img src={preview.image} alt={preview.name} />
        </div>
      )}
      <div>产品ID: {id}</div>
      <div>来自分类: {category}</div>
      <div>排序方式: {sort}</div>
      {/* 完整数据加载后显示更多内容 */}
    </div>
  );
}

优缺点分析

查询参数优点： - 可分享的URL - 刷新页面后参数不丢失 - 便于SEO抓取

查询参数缺点： - 只能传递字符串 - 复杂数据结构需要序列化 - URL长度有限制

路径参数优点： - 干净的URL结构 - 适合必填的关键参数 - RESTful风格

路径参数缺点： - 需要预先配置路由 - 不适合可选参数

状态参数优点： - 可以传递复杂对象 - 不暴露敏感信息 - 不占用URL长度

状态参数缺点： - 刷新页面会丢失 - 无法直接分享链接 - 浏览器前进/后退可能有问题

最佳实践建议

合理选择传参方式：
关键标识用路径参数 (如 /user/:id)
筛选条件用查询参数 (如 ?page=2&sort=name)
复杂对象用状态参数
安全性考虑：
敏感信息不要放在URL中
状态参数要处理未定义情况
验证所有传入参数
性能优化：
大数据量考虑使用状态管理而非路由参数
重要数据即使通过状态传递也应在组件加载后重新获取
兼容性处理： ```jsx // 安全访问状态参数 const { data } = useLocation().state || {};

// 类型转换示例 const page = parseInt(searchParams.get('page')) || 1; ```

小结

React Router 的 Link 组件提供了灵活的传参方式，适合不同场景的需求。掌握这些技巧可以让你：

构建更专业的URL结构
实现页面间高效数据传递
提升用户体验和SEO友好性
处理复杂的前端路由场景

记住，没有放之四海而皆准的方案，根据你的具体需求选择最合适的传参方式才是最佳实践。希望本文能帮助你在React项目中更加游刃有余地处理路由参数传递！

posted @ 2025-07-03 23:14 富美阅读(51) 评论(0) 收藏举报

刷新页面返回顶部

推荐阅读

富美