如何实现点击按钮从React JS向React TypeScript页面传递JSON变量

• 你编写的FileUploader是函数式组件，不存在this指向，直接调用this.props属于语法错误
• TypeScript场景下未给路由传递的state定义明确类型，会触发空值、类型不匹配报错
• 页面1跳转的pathname写了相对路径./upload，部分路由版本下会出现路径解析错误，建议改为绝对路径/upload

页面1（userDetails.js）可选优化 #

只需要修改history.push部分的pathname即可：

history.push({
  pathname: '/upload', // 去掉开头的点，用绝对路径
  state: jsonObj 
});

页面2（fileUploader.tsx）完整修复 #

适配react-router v5/v6版本 #

1. 首先导入useLocation钩子，定义传递参数的类型
2. 通过钩子拿到路由携带的state，添加空值兼容逻辑
   完整代码示例：

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

// 定义传递的JSON结构类型
type FormItem = {
  project: string;
  corporateId: string;
  backOffice: string;
  environment: string;
}

const FileUploader = (): JSX.Element => {
  // 给useLocation添加泛型，明确state的类型
  const location = useLocation<FormItem[]>();
  // 可选链+空值默认值，避免直接进入页面时state为空报错
  const formState = location.state ?? [];

  // 后续可以直接使用formState变量拿到传递的JSON数组
  console.log(formState);

  // 剩下的原有逻辑
  return <div>上传页面</div>
}
export default FileUploader;

如果你升级到了react-router v6版本，页面1的useHistory需要同步替换 #

v6已经移除了useHistory，替换为useNavigate，修改后的页面1提交逻辑：

// 原来的let history = useHistory()替换为
let navigate = useNavigate();

// 原来的history.push替换为
navigate('/upload', { state: jsonObj });

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