Differences between Link and window.history.pushState()?

Programming
,
1

When clicking the button component Aaaaaa is not re-rendered, but when tapping on the Link component Aaaaaa is re-rendered.

What could be causing this behavior?

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

and:

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

When clicking the button, component Aaaaaa is not re-rendered. However, when tapping on the Link, component Aaaaaa is re-rendered.

What could be causing this behavior?

2

The button component uses window.history.pushState to change the URL without triggering a full page reload. This means that the location object returned by useLocation in Aaaaaa does not get updated when the button is clicked. On the other hand, the Link component uses the react-router library to update the URL and trigger a re-render of the Aaaaaa component. To fix this behavior, you should use the react-router library to handle all navigation within your application.