React组件间传参最佳方案咨询：Creation向Payment传参并跳转

针对你的需求，推荐两种最实用的方案，可根据参数是否需要暴露在URL中选择：

方案一：URL查询参数（直观、持久） #

适合允许参数出现在地址栏的场景，刷新页面后参数不会丢失。

Creation组件代码： #

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

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

  // 替换为你的实际字符串生成逻辑
  const generateAndRedirect = () => {
    const generatedString = "这里是你生成的目标字符串";
    // 用encodeURIComponent处理特殊字符，避免URL解析异常
    navigate(`/payment?data=${encodeURIComponent(generatedString)}`);
  };

  // 字符串生成后自动触发跳转，此处用useEffect模拟生成完成时机
  useEffect(() => {
    generateAndRedirect();
  }, []);

  return <div>Creation页面</div>;
}

Payment组件代码： #

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

function Payment() {
  const [searchParams] = useSearchParams();
  // 获取传递的参数
  const receivedString = searchParams.get('data');

  return (
    <div>
      <h3>Payment页面</h3>
      <p>收到的字符串：{receivedString}</p>
    </div>
  );
}

方案二：React Router State参数（隐藏、临时） #

适合需要隐藏参数、不希望出现在URL中的场景，但刷新页面后参数会丢失。

Creation组件代码： #

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

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

  useEffect(() => {
    const generatedString = "这里是你生成的目标字符串";
    // 通过state传递参数，不会暴露在URL中
    navigate('/payment', { state: { generatedData: generatedString } });
  }, []);

  return <div>Creation页面</div>;
}

Payment组件代码： #

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

function Payment() {
  const location = useLocation();
  // 用可选链避免页面刷新后state不存在导致的报错
  const receivedString = location.state?.generatedData;

  return (
    <div>
      <h3>Payment页面</h3>
      <p>收到的字符串：{receivedString}</p>
    </div>
  );
}

方案选择建议 #

• 如果参数不需要保密、需要刷新后仍然保留，选方案一
• 如果参数需要隐藏、仅用于页面跳转后的临时使用，选方案二

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