I am using React Router v3 and I am trying to alter the browser's back-button functionality to close an open modal without moving backwards and retain the page on the background. I accomplish this with the following code:
componentDidMount() {
browserHistory.push('modal');
window.addEventListener('popstate', this.props.closeModal);
}
componentWillUnmount() {
window.removeEventListener('popstate', this.props.closeModal);
}
This works as expected. At the same time, I want to provide a catch-all route to display the home page component when the user tries to navigate to a route that is not defined. However, the code <Route path="*" component=... />
requires that I specify a specific component. When I push the modal
route to the browserHistory stack, I get an error. When I provide <Route path="*" component=... />
, I lose the background behind the modal when the modal
route is pushed to browserHistory. Is there a way to define a catch-all route that renders the last component that was active or perhaps a better way to approach this problem?