基于Redux与React Router，如何向组件传递非URL参数的敏感数据？

嘿，结合你用Redux + React Router的场景，我给你整理几个不用URL参数传递数据的实用方案，你可以根据自己的需求选：

1. 利用Redux全局状态（最适合持久/全局数据） #

既然你已经在用Redux了，这绝对是最顺手的方式——把需要传递的数据存在全局store里，目标组件直接从store读取就行，完全不用依赖路由参数。

举个简单的实现例子：

源组件（存数据+跳转） #

import { useDispatch } from 'react-redux';
import { saveTargetData } from './your-redux-actions'; // 你的action
import { Link } from 'react-router-dom';

const SourceComponent = () => {
  const dispatch = useDispatch();
  // 假设这是你要传递的数据
  const dataToPass = { userId: 456, userName: 'Marvin' };

  // 跳转前先把数据存入Redux
  const handleGoToTarget = () => {
    dispatch(saveTargetData(dataToPass));
  };

  return (
    <Link to="/target-page" onClick={handleGoToTarget}>
      跳转到目标页面
    </Link>
  );
};

目标组件（读数据） #

import { useSelector } from 'react-redux';

const TargetComponent = () => {
  // 从Redux store中取出数据
  const passedData = useSelector(state => state.yourReducer.targetData);

  // 可以加个判断，避免直接访问路由时没有数据的情况
  if (!passedData) {
    return <div>暂无数据</div>;
  }

  return (
    <div>
      <h2>用户ID：{passedData.userId}</h2>
      <p>用户名：{passedData.userName}</p>
    </div>
  );
};

注意：如果这是临时数据，记得在目标组件卸载（比如用useEffect加清理函数）或者不再需要时，dispatch一个action清空store里的对应字段，避免状态污染。

2. React Router的state属性（适合临时跳转传参） #

React Router的Link组件和useNavigate钩子都支持传递state参数，这些数据会存在路由历史的内存里，不会出现在URL上，非常适合跳转时带一次性的临时数据。

源组件（用Link传state） #

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

const SourceComponent = () => {
  const dataToPass = { orderId: 789, total: 199 };

  // 直接把数据放在state里
  return (
    <Link 
      to="/order-detail" 
      state={{ orderData: dataToPass }}
    >
      查看订单详情
    </Link>
  );
};

目标组件（用useLocation取state） #

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

const TargetComponent = () => {
  const location = useLocation();
  // 注意用可选链避免直接访问路由时的报错
  const passedData = location.state?.orderData;

  if (!passedData) {
    return <div>无法获取订单数据</div>;
  }

  return (
    <div>
      <h2>订单ID：{passedData.orderId}</h2>
      <p>订单总价：{passedData.total}元</p>
    </div>
  );
};

注意：这种方式的缺点是刷新页面后state数据会丢失，因为它存在内存里不是持久化的。如果需要刷新后还能保留数据，还是得结合Redux或者localStorage。

3. React Context（备选方案，适合非全局的局部共享） #

如果你的组件是在同一个Context层级下，也可以用自定义Context来传递数据，但既然你已经用了Redux，这个方案优先级不如前两个，不过还是给你参考：

第一步：创建Context和Provider #

import { createContext, useContext, useState } from 'react';

const SharedDataContext = createContext();

export const SharedDataProvider = ({ children }) => {
  const [sharedData, setSharedData] = useState(null);

  return (
    <SharedDataContext.Provider value={{ sharedData, setSharedData }}>
      {children}
    </SharedDataContext.Provider>
  );
};

// 自定义hooks方便使用
export const useSharedData = () => useContext(SharedDataContext);

源组件（设置数据） #

import { useSharedData } from './SharedDataContext';
import { Link } from 'react-router-dom';

const SourceComponent = () => {
  const { setSharedData } = useSharedData();
  const dataToPass = { productId: 101, productName: 'React实战手册' };

  const handleNavigate = () => {
    setSharedData(dataToPass);
  };

  return (
    <Link to="/product-detail" onClick={handleNavigate}>
      查看商品详情
    </Link>
  );
};

目标组件（读取数据） #

import { useSharedData } from './SharedDataContext';

const TargetComponent = () => {
  const { sharedData } = useSharedData();

  if (!sharedData) {
    return <div>无法获取商品数据</div>;
  }

  return (
    <div>
      <h2>商品ID：{sharedData.productId}</h2>
      <p>商品名称：{sharedData.productName}</p>
    </div>
  );
};

同样，这个方式的数据也是存在内存里，刷新就没了，而且需要把相关组件包裹在SharedDataProvider里，适合局部组件树的共享，全局场景还是Redux更省心。

内容的提问来源于stack exchange，提问作者Marvin