onClick浏览器重定向到不同的URL - Reactjs

Question

方案是我在页面上，例如http://example.com/order-confirmation ，之前的URL是/ payment。 现在，当用户按下后退按钮时，我想将它们重定向到主页，即URL'/'，但它会返回/付款页面。 我在我的应用程序中使用react("^15.1.0")和react-router("^2.4.1")和react-router-redux("^4.0.4") 。

我试过在StackOverflow或git上跟随多个答案，但都是徒劳的。 我试过以下：

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(`/`));
};

我的路线：

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>
);

有没有办法覆盖这种行为？ 请建议......先谢谢:)

Answer 1

你能试试这段代码吗？

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

请尝试以下方法：

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('/');
};