I was originally using hashHistory from react-router and programmatically navigating my React app using this.props.history.push(). But with the move to using HashRouter from the react-router-dom package, this.props.history.push() now throws a Cannot read property 'push' of undefined error.
How do I programmatically navigate using HashRouter now?
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider>
<HashRouter>
<div>
<Route exact path="/" component={App} />
<Route path="/landing" component={Landing} />
</div>
</HashRouter>
</MuiThemeProvider>
</Provider>,
document.getElementById('root'));
Render func of App.js
render() {
return (
<div className="App">
...
<div>
<Collapse isOpened={this.state.activeForm === 1}>
<SignUpForm />
</Collapse>
<Collapse isOpened={this.state.activeForm === 2}>
<SignInForm />
</Collapse>
...
</div>
);
}
Function in SignUpForm.js that's calling .push()
handleSubmit(e) {
...
this.props.history.push('/landing');
...
}