在react-router中使用Link组件和手动调用window.history.pushState()有什么区别？

Question

在我的代码中，当我单击按钮时，组件Aaaaa不会重新渲染，但是当我点击链接时，组件Aaaaa会重新渲染。我找不到原因？

function App() {
  return (
    <>
        <button onClick={() => window.history.pushState('','','/about')}>About</button>
        <Link to='/about'>to About</Link>
        <Aaaaaa/>
    </>
  );
}

和：

Aaaaaa(){
   const location = useLocation()
   return <div>About </div>
}

Answer 1

<Link to='/about'>to About</Link>正确的方法是在尝试手动导航（通过单击按钮）和window.history.pushState('','','/about')尝试自动导航（例如完成 API 调用后）时使用。