如何将从API获取的数据作为props传递给其路由在React JS的另一个页面中定义的组件？

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const GetDataFromAPI = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('API_URL')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    // 渲染数据或其他需要的组件
  );
};

export default GetDataFromAPI;

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import GetDataFromAPI from './GetDataFromAPI';
import AnotherPageComponent from './AnotherPageComponent';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <GetDataFromAPI />
        </Route>
        <Route path="/anotherpage">
          {/* 在这里将获取的数据作为props传递给另一个页面中定义的组件 */}
          <AnotherPageComponent data={data} />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;

import React from 'react';

const AnotherPageComponent = (props) => {
  const { data } = props;

  // 使用获取到的数据进行处理或渲染

  return (
    // 渲染处理后的数据或其他需要的组件
  );
};

export default AnotherPageComponent;