3

in my code when i click button, component Aaaaa is not re-rendered, but when i tap on link, component Aaaaa is re-rendered. i can't find cause of it?

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>
}
3
  • window.history.pushState is not from react-router. Take a look at the docs for the react-router version of that here Jan 2, 2020 at 16:58
  • Also check the docs for the native JS version you are currently using. It says "Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser" Jan 2, 2020 at 17:03
  • not right answer! I mean why window.history.pushState cause not rerender component Aaaaa? while window.history.pushState change location and Aaaaa use useLocation() hook.
    – sably
    Jan 3, 2020 at 8:43

4 Answers 4

7

The proper way is to use <Link to='/about'>to About</Link> when trying to navigate manually (by clicking a button) and window.history.pushState('','','/about') when trying to navigate automatically (like after completing an API call).

2

cause window.history.pushState is not using the react router so you can use link to navigate between the pages. but if you have limits and you want it to be a buttn and still navigate using react router, you can use history from react-router-dom

import { withRouter } from 'react-router-dom'
// some other codes
const { history } = props;
// some other codes
<button onClick={() => history.push('/about')}>About</button>
// some other codes
export default withRouter(MyComponent)

or you can use 'useHistory' hook if you're using react-router v5.

import { useHistory } from 'react-router-dom'
// some other codes
const history = useHistory();
// some other codes
<button onClick={() => history.push('/about')}>About</button>
// some other codes
export default MyComponent
1

I found that window.history.pushState('','','/about') does not work as expected. The router does not update what route to display.

If you cant use a button and need to control the location programatically, but use class components wrap it in a function component like this:

... other routes

<Route exact path="/register" component={()=>{
    const history = useHistory();
    return <RegisterPage onRegister={async (account) => {
      this.setState({ account });
      history.push('/'); // sends user automatically to main page
    }} />
  }} />

...
1

window.history.pushState method doesn't trigger any browser event, which in turn doesn't notify react router about the update you made to the history object

React router custom Link component is most likely going to use a custom event or the observer design pattern to be able to notify and respond to changes in the window history object

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.