別のURLにリダイレクトするonClickブラウザ戻る - Reactjs

Question

シナリオは私はページ上にあります。 http://example.com/order-confirmationで、前のURLは/ paymentです。ユーザーが「戻る」ボタンを押すと、ホームページ、つまりURL「/」にリダイレクトしたいのですが、/ paymentページに戻ります。 私のアプリケーションで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('/'); 
};