Redirect to different URL onClick browser back - Reactjs

Question

The scenario is I am on a page eg http://example.com/order-confirmation and the previous URL is /payment. Now when the user presses back button, I want to redirect them to home page ie to URL '/' but it's going back to /payment page. I am using react("^15.1.0") and react-router("^2.4.1") and react-router-redux("^4.0.4") in my application.

I have tried following multiple answers on StackOverflow or git but all in vain. Eg I tried below:

import { push } from 'react-router-redux';

<Route
  path={`${AppPaths.ORDER_CONFIRMATION}/:orderId`} component={OrderConfirmationContainer} onLeave={(prevState) => routeBackHome(store, prevState)}
  onEnter={routeEntryHandler(store, nonGuestUserValidator)}
/>

const routeBackHome = (store, prevState) => {
    store.dispatch(push(`/`));
};

My routes:

export const createRoutes = store => (
<Route path={AppPaths.BASE} component={CheckoutAppContainer} onEnter={CheckoutAppContainer.fetchUserState(store)}>
<IndexRedirect to={`${AppPaths.BASE}/${AppPaths.BAG}`} />
<Route component={CheckoutWizardContainer} onLeave={() => clearNotifications(store)}>
  <Route
    path={AppPaths.BAG} component={CartContainer} onLeave={() => clearNotifications(store)}
    onEnter={() => updateStepNumber(store, 1)}
  />
  <Route
    path={AppPaths.PAYMENT} component={QuickCheckoutContainer} onLeave={() => clearNotifications(store)}
    onEnter={checkoutEntryHandler(store, 3)}
  />
</Route>
<Route
  path={`${AppPaths.ORDER_CONFIRMATION}/:orderId`} component={OrderConfirmationContainer}
  onEnter={routeEntryHandler(store, nonGuestUserValidator)}
/>
</Route>
);

Is there any way to override this behavior? Please suggest... Thanks in advance :)

Answer 1

Can you try this code?

class YourComponent extends Component {
  constructor(props) {
      super(props);

      this.onUnload = this.onUnload.bind(this); // if you need to bind callback to this
  }

  onUnload(event) { // the method that will be used for both add and remove event
    const gohome = confirm('go home?')
    if (gohome === true) {
      console.log('yay')
      window.location = 'http://yourhomepage.com'
    }else {
      console.log('yes')
    }
  }

  componentDidMount() {
     window.addEventListener("beforeunload", this.onUnload)
  }

  componentWillUnmount() {
      window.removeEventListener("beforeunload", this.onUnload)
  }

  render() {
    return (
      <div>
          Try with window location
      </div>
    )
  }
}

Answer 2

Try the following:

import { browserHistory } from 'react-router'

import { push } from 'react-router-redux';

<Route
  path={`${AppPaths.ORDER_CONFIRMATION}/:orderId`} component={OrderConfirmationContainer} onLeave={(prevState) => routeBackHome(store, prevState)}
  onEnter={routeEntryHandler(store, nonGuestUserValidator)}
/>

const routeBackHome = (store, prevState) => {
    browserHistory.push('/');
};