react-router " Cannot read property 'push' of undefined"
If you are use Partial Component and calling it like <Header />
then you should replace it by <Header {...this.props} />
Your app does not have an instance of Router in its props which is giving you Cannot read property 'push' of undefined
.
I'm assuming you're importing withRouter to get the instance of the Router so you'd need to wrap the component in that if you still want to use that... (example here but not suggested)
Instead, a better approach to programmatically navigating is to use
import { hashHistory } from 'react-router;'
...
hashHistory.push('/');
in your componentWillMount
lifecycle event.
The docs are here
Hope this helps!
You are using hashHistory. The following code should work.
import { hashHistory } from 'react-router';
hashHistory.push('/');
The root route should also be defined.
<Route path="/" component={App}>
Using hashHistory
directly from react-router
is certainly an option, but it makes unit-testing a bit more painful.
Browser history will generally not be available in the context tests run in and it's easier to mock out a prop than to mock out a global API.
Consider using the withRouter
higher-order-component that react-router
provide (since v2.4.0
).
import { withRouter } from 'react-router';
class App extends Component {
(...)
}
export default withRouter(App);
Your App
class will receiver router
via props and you can safely do this.props.router.push('/');
.