react路由跳转携带数组参数

React路由跳转携带数组参数：实现方法与最佳实践

导语

在前端开发中，路由跳转时传递参数是常见的需求。当我们需要在React应用中传递数组类型的数据时，会遇到一些特殊的处理场景。本文将详细介绍在React Router中如何优雅地实现路由跳转时携带数组参数，包括多种实现方式、使用场景分析以及实际代码示例。

核心概念解释

在React Router中，路由跳转传递参数主要有三种方式：

1. URL参数：通过路径直接传递
2. 查询参数：通过URL的query string传递
3. 状态参数：通过路由的state对象传递

对于数组参数，我们需要特别注意序列化和反序列化的处理，因为URL本身只能传递字符串类型的数据。

使用场景

需要传递数组参数的典型场景包括：

• 多选筛选结果页面的跳转
• 批量操作时的数据传递
• 购物车商品列表的跳转
• 需要保持多个ID的导航场景

优缺点对比

URL参数方式

优点： - 参数可见，可分享链接 - 刷新页面不会丢失参数

缺点： - 长度受限 - 需要编码/解码处理 - 不适合传递复杂数据结构

查询参数方式

优点： - 结构清晰 - 可传递多个数组 - 支持复杂数据结构

缺点： - URL会变得冗长 - 需要处理序列化

状态参数方式

优点： - 可传递任意数据结构 - 不会暴露在URL中 - 适合大数据量传递

缺点： - 刷新页面会丢失 - 不可直接分享链接

实战案例

1. 使用URL参数传递数组

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

function ProductList() {
  const navigate = useNavigate();

  const handleNavigate = () => {
    const selectedIds = [101, 205, 308];
    // 将数组转换为逗号分隔的字符串
    const idsString = selectedIds.join(',');
    navigate(`/products/selected/${idsString}`);
  };

  return (
    <button onClick={handleNavigate}>查看选中商品</button>
  );
}

// 接收组件
import { useParams } from 'react-router-dom';

function SelectedProducts() {
  const { idsString } = useParams();
  // 将字符串转回数组
  const selectedIds = idsString.split(',').map(Number);

  // 使用selectedIds进行后续操作...
}

2. 使用查询参数传递数组

import { useNavigate } from 'react-router-dom';
import qs from 'query-string';

function FilterComponent() {
  const navigate = useNavigate();

  const applyFilters = () => {
    const filters = {
      categories: ['electronics', 'books'],
      priceRange: [100, 500]
    };

    // 使用query-string库处理数组
    const query = qs.stringify(filters, { arrayFormat: 'bracket' });
    navigate(`/results?${query}`);
  };

  return (
    <button onClick={applyFilters}>应用筛选</button>
  );
}

// 接收组件
import { useLocation } from 'react-router-dom';
import qs from 'query-string';

function ResultsPage() {
  const location = useLocation();
  const filters = qs.parse(location.search, { arrayFormat: 'bracket' });

  // filters.categories 和 filters.priceRange 已经是数组
}

3. 使用state传递数组（React Router v6）

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

function ShoppingCart() {
  const navigate = useNavigate();
  const cartItems = [
    { id: 1, name: '商品A', quantity: 2 },
    { id: 2, name: '商品B', quantity: 1 }
  ];

  const goToCheckout = () => {
    navigate('/checkout', { 
      state: { 
        items: cartItems,
        total: cartItems.reduce((sum, item) => sum + item.quantity, 0)
      } 
    });
  };

  return (
    <button onClick={goToCheckout}>去结算</button>
  );
}

// 接收组件
import { useLocation } from 'react-router-dom';

function CheckoutPage() {
  const location = useLocation();
  const { items, total } = location.state || {};

  // 使用items数组进行渲染...
}

处理特殊字符和复杂数据

当数组中包含特殊字符或复杂对象时，建议使用JSON序列化：

// 发送方
const complexArray = [
  { id: 1, name: 'Item 1', specs: ['red', 'large'] },
  { id: 2, name: 'Item 2', specs: ['blue', 'medium'] }
];

navigate('/details', {
  state: {
    data: JSON.stringify(complexArray)
  }
});

// 接收方
const location = useLocation();
const dataArray = JSON.parse(location.state?.data || '[]');

安全注意事项

1. 当使用URL传递参数时，注意不要传递敏感数据
2. 对接收的参数进行验证和类型检查
3. 考虑URL长度限制（约2000字符）
4. 处理参数缺失或格式错误的情况

小结

在React路由跳转中携带数组参数有多种实现方式，各有适用场景：

• 简单ID数组可考虑URL参数或查询参数
• 复杂数据结构推荐使用state传递
• 大量数据或敏感信息应使用状态管理或临时存储
• 始终考虑URL的可分享性和刷新后的行为

选择合适的方法需要权衡参数大小、安全性需求和使用场景。希望本文提供的多种方案能帮助你在实际项目中做出合理选择。

最佳实践建议：对于大多数场景，查询参数（使用arrayFormat）和state传递的组合能够满足需求，既保持了URL的可分享性，又能处理复杂数据结构。