在使用Axios获取数据时，如何使用ReactJs中的history.push将数据数组从一个组件传递到另一个组件

import React from 'react';
import { useHistory } from 'react-router-dom';
import axios from 'axios';

const SourceComponent = () => {
  const history = useHistory();

  const fetchData = async () => {
    try {
      const response = await axios.get('https://api.example.com/data');
      const data = response.data;

      // 将数据传递给目标组件
      history.push({
        pathname: '/target',
        state: { data: data }
      });
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <button onClick={fetchData}>获取数据</button>
    </div>
  );
};

export default SourceComponent;

import React from 'react';

const TargetComponent = (props) => {
  const data = props.location.state.data;

  return (
    <div>
      {/* 使用传递过来的数据数组 */}
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default TargetComponent;