React Router中通过Modal确认按钮跳转传参的实现方案

你之前尝试在handleOk里返回Link组件的方式行不通，因为Link是React组件，只能在JSX渲染阶段生效，事件处理函数里返回它不会触发跳转行为。咱们得用React Router的编程式导航来实现这个需求，具体步骤如下：

1. 导入并使用useNavigate钩子（React Router v6+） #

首先在你的组件里引入useNavigate，它是React Router v6用来实现编程式跳转的核心钩子：

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

然后在组件内部初始化这个钩子：

const navigate = useNavigate();

2. 修改handleOk函数 #

把原来返回Link的逻辑改成调用navigate方法，同时保留你原来保存数据的逻辑：

const handleOk = () => {
  // 1. 执行你原来的保存数据/关闭Modal的逻辑
  setState(false); // 这里替换成你实际关闭Modal的state更新，比如setVisible(false)
  
  // 2. 编程式跳转并传递额外数据
  const targetPath = `${myPath}/demo`; // 注意修正路径的语法，原来的代码里多了个多余的}
  navigate(targetPath, {
    state: { myAnotherData: '你要传递的另一组数据' } // 替换成你实际的业务数据
  });
};

3. 在目标组件接收传递的参数 #

跳转到目标页面后，你可以用useLocation钩子来获取传递的state数据：

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

const DemoPage = () => {
  const location = useLocation();
  // 可选链操作符避免undefined报错
  const receivedData = location.state?.myAnotherData;
  
  return (
    <div>
      接收传递的数据：{receivedData}
    </div>
  );
};

注意事项 #

• 路径拼接要注意语法：你原来的代码里pathname: ${my path}/demo}``多了一个闭合的}，要改成${myPath}/demo（如果myPath是变量的话）
• 传递的state数据最好是可序列化的（比如字符串、数字、普通对象），避免传递函数或复杂实例，防止路由跳转时出现问题
• 如果用的是React Router v5，把useNavigate换成useHistory，调用history.push方法即可：

  import { useHistory } from 'react-router-dom';
  const history = useHistory();
  
  // 在handleOk里
  history.push(`${myPath}/demo`, { myAnotherData: '你的数据' });
  

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