react路由怎么传递参数

React路由参数传递全攻略：从基础到实战

导语

在React单页应用开发中，路由管理是核心功能之一，而参数传递则是路由使用中最常见的需求。无论是电商网站的商品详情页，还是博客系统的文章页面，都需要通过路由参数来动态展示内容。本文将全面解析React路由中各种参数传递方式，帮助开发者掌握这一重要技能。

核心概念解释

React路由参数传递主要分为三种方式：

1. 动态路由参数：通过URL路径直接传递
2. 查询字符串：类似传统URL的?key=value形式
3. 状态参数：通过路由状态对象传递，不会显示在URL中

在React生态中，主要使用react-router-dom库来实现路由功能，目前主流版本是v5和v6（本文示例基于v6）。

使用场景分析

1. 动态路由参数

// 路由配置
<Route path="/user/:id" element={<UserPage />} />

// 组件中获取参数
import { useParams } from 'react-router-dom';

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

适用场景： - 需要SEO友好的URL - 参数是资源标识符（如ID、slug） - 希望URL可被直接分享或收藏

2. 查询字符串

// 跳转时生成查询字符串
navigate(`/search?query=${keyword}&page=${pageNum}`);

// 组件中获取查询参数
import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('query');
  const page = searchParams.get('page');

  return <div>搜索: {query}, 页码: {page}</div>;
}

适用场景： - 需要传递多个可选参数 - 参数是过滤、排序等非核心信息 - 参数可能不存在或有默认值

3. 状态参数

// 跳转时传递state
navigate('/dashboard', { 
  state: { from: 'homepage', timestamp: Date.now() } 
});

// 组件中获取state
import { useLocation } from 'react-router-dom';

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

  return <div>来自: {from}, 时间: {timestamp}</div>;
}

适用场景： - 传递敏感或临时数据 - 需要传递复杂对象（如函数、组件） - 不希望参数暴露在URL中

各方式优缺点对比

方式	优点	缺点
动态参数	SEO友好，URL简洁	只能传递简单值，需预定义路由
查询字符串	灵活，无需预定义	URL冗长，类型都是字符串
状态参数	可传递复杂数据，URL干净	刷新页面会丢失，不可分享

实战案例：电商商品详情页

假设我们正在开发一个电商网站，需要实现以下功能： 1. 通过商品ID展示详情 2. 支持来源追踪（如来自哪个促销活动） 3. 可选的预览模式参数

// 路由配置
<Routes>
  <Route path="/product/:productId" element={<ProductDetail />} />
</Routes>

// 商品列表页跳转
function ProductList() {
  const navigate = useNavigate();

  const viewDetail = (product) => {
    navigate(`/product/${product.id}`, {
      state: {
        from: 'promo-section',
        campaign: 'summer-sale'
      },
      search: '?preview=true'
    });
  };

  return (
    <div>
      {products.map(product => (
        <button key={product.id} onClick={() => viewDetail(product)}>
          查看详情
        </button>
      ))}
    </div>
  );
}

// 商品详情页
function ProductDetail() {
  const { productId } = useParams();
  const [searchParams] = useSearchParams();
  const location = useLocation();

  const isPreview = searchParams.get('preview') === 'true';
  const { from, campaign } = location.state || {};

  return (
    <div>
      <h1>商品ID: {productId}</h1>
      {isPreview && <div className="preview-banner">预览模式</div>}
      {from && <p>来源: {from}, 活动: {campaign}</p>}
      {/* 商品详情内容 */}
    </div>
  );
}

这个案例综合运用了三种参数传递方式： 1. 商品ID通过动态参数传递，保证URL简洁且SEO友好 2. 来源信息通过state传递，避免暴露营销策略 3. 预览模式通过查询字符串传递，方便临时调试

高级技巧与注意事项

1. 类型转换：查询字符串获取的值都是字符串类型，需要手动转换 jsx const page = parseInt(searchParams.get('page')) || 1;

2. 默认值处理：state可能为undefined jsx const { from = 'unknown' } = location.state || {};

3. URL编码：动态参数含特殊字符时需要编码 jsx navigate(`/search/${encodeURIComponent(keyword)}`);

4. 嵌套路由参数：子路由可以访问父路由的参数 jsx <Route path="users/:id" element={<UserLayout />}> <Route path="posts/:postId" element={<UserPost />} /> </Route> // UserPost中可以访问id和postId

小结

React路由参数传递看似简单，实则包含多种方案和细节考量。在实际项目中，建议：

1. 优先使用动态路由参数传递核心资源标识
2. 查询字符串适合可选过滤条件
3. 状态参数用于临时或敏感数据
4. 混合使用多种方式应对复杂场景

正确选择参数传递方式，能让应用路由更加清晰健壮，同时提升用户体验和开发效率。希望本文能帮助你在React路由开发中做出更合理的设计决策。