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>
}
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).
useHistory hook. This answer is actually wrong.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
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
}} />
}} />
...
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
window.history.pushStateis not from react-router. Take a look at the docs for the react-router version of that herewindow.history.pushStatecause not rerender componentAaaaa? whilewindow.history.pushStatechange location andAaaaauseuseLocation()hook.