如何在链接单击上重新渲染组件

Question

我有一条路线，在其下方有一个简单的导航栏。

react-router-dom中的<Link>在单击同一页面的URL时不起作用。

<Route path="/samePage" component={Component} />

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

function SomeNavBar(){
   return (
      <Link to="/samePage">Refresh</Link>
   );
}

function Component(){
    // some state
    let [data, setData] = useState([]);

    useEffect(()=>{
      // fetch data from API here
    });

    return (
    <>
       <SomeNavBar />
       {/* Displaying the state*/}
    </>);
}

我想通过单击导航栏中的Link刷新状态。因此，一种选择是使用<a href>而不是<Link to="" />，因为它将重新加载页面并完成所需的操作。

但是由于我们正在使用React，因此重载很糟糕，那么如何在点击时重新呈现路线？