Avoid react-router goBack() going out of application

Question

I am using vanilla React with react-router to build a simple master-detail SPA. In the list page, i used push(*route*) to navigate the user to a detail view, a back button on the detail view then calls goBack() to navigate the user to the list view.

The reason for me to use the goBack() function instead of push('/list') is to allow the user to navigate back to the list view without losing filtering/pagination parameters (e.g. /list/1/10?q=abc).

The problem I have is, if the user started the browser from e.g. Google, then copy/paste the detail view url into the address bar, the goBack() function will take them back to Google as Google was his last history.

Is there a way to check the goBack() destination and decide to perform goBack() based on whether the user will exit the application?

maxi C maxi C · Accepted Answer · 2016-10-24T23:42:36

We can use router to push the query param in the list page as states to the destination page, which is available only if the detail page is navigated from the list page.

The state is only maintained within the current application scope. Copy pasting the url into another browser tab will lose this state.

Example: List page navigation to detail page

router.push({
    pathname: '/users/12',
    query: { modal: true },
    state: { fromDashboard: true }
})

Detail page:

if (this.props.location.state && this.props.location.state.params) {
    navigateBackUsingParams(this.props.location.state.params);
} else {
    navigateBackWithHardcodedUrl();
}

Avoid react-router goBack() going out of application

1 Answers