Reactjs 在链接悬停时响应发送API调用以预加载数据

我正在尝试改进我的React应用程序的UI，我想尝试解决的一件事是，当用户悬停在链接上时，如何预触发API调用，因此当他们点击时，数据已经加载并且

FakeAPI.jsx

已经用API调用的数据填充了状态

//FakeApi.jsx
import React, { useState, useEffect } from 'react';

const FakeApi = () => {

const [data, setData] = useState([])

useEffect(()=>{
    setTimeout(() => {
        //simulates an api call to the backend
        setData(['1','2','3'])
    }, 250);
}, [])



    return (
        <div>
            Fake Api call
            {data.map(entry=>(
                <div key={entry}>number is {entry}</div>
            ))}
        </div>
    );
};

export default FakeApi;

目前，我得到了以下信息：

//Home.jsx

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

const Home = () => {
    return (
        <div className="links">
            //I would want to load the API call when a user hovers on the below link
            <Link to="/fakeApi">Fake Api</Link>
        </div>
    );
};

export default Home;

然而，实际上，

home.jsx

是一个非常大的文件，包含其他几个函数和API调用，我正试图保持它整洁，因此我正在寻找另一种解决方案——将每个调用保留到一个路由

谢谢你的帮助

//Home.jsx
import React from 'react';
import {Link} from 'react-router-dom';
import LinkWithPreload from '../shared/LinkWithPreload';

const Home = () => {

    const [data, setData] = useState([])

    useEffect(()=>{
        setTimeout(() => {
            //simulates an api call to the backend
            setData(['1','2','3'])
        }, 1000);
    }, [])

    return (
        <div className="links">
            <Link to="/fakeApi" props={data}>Fake Api</Link>
        </div>
    );
};

export default Home;