React Router: Go back to specific page

I have a settings page, with a few sub routes:

--/home
--/articles
--/settings
--/Account(default)
--/Help
--/About


I would like it in such a way: when I'm in any one of the sub pages under settings, and the browser go back in history, it should always go to the (default)Account page. Going back again will follow the normal browser history behavior.

What's the best way of handling it?

2 Answers
2

You can use history:

import createHistory from "history/createBrowserHistory"

const history = createHistory()
history.push("/account")
<Router history=history/>


After quite some research, it seems there's no easy way of doing it, discussions in react-router github wouldn't disagree. A workaround seems to be the consensus. Which is a bit raw to my liking, but anything that works is good.

So instead of keeping every sub page under settings with their own route(to be handled by react-router), I have them controlled by state in settings component. And the following event handling is used:

componentDidMount = () =>
window.onpopstate= () =>
if(this.state.currentSubPage !== 'account-settings')
this.props.history.push('/settings');
else
window.onpopstate = null;

;



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.