重定向到不同的网址onClick浏览器返回 - Reactjs

Question

这种情况是我在一个页面上，例如http://example.com/order-confirmation和以前的网址是/付款。现在，当用户按下返回按钮时，我想将它们重定向到主页，即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('/'); 
};