Javascript 重定向到不同的URL onClick browser back-Reactjs

场景是我在一个页面上，例如，前面的URL是/payment。现在，当用户按下“后退”按钮时，我想将他们重定向到主页，即URL“/”，但它将返回到/payment页面。 我正在应用程序中使用

react（^15.1.0”）

和

react路由器（^2.4.1”）

和

react路由器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(`/`));
};

从'react router redux'导入{push}；
routeBackHome（存储，prevState）}
onEnter={routeEntryHandler（商店，非UESTUserValidator）}
/>
常量routeBackHome=（存储，prevState）=>{
存储调度（推送（`/`））；
};

我的路线：

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

export const createRoutes=store=>(
clearNotifications（存储）}>
clearNotifications（存储）}
onEnter={（）=>updatestNumber（存储，1）}
/>
clearNotifications（存储）}
onEnter={checkoutEntryHandler（store，3）}
/>
);

有什么方法可以替代这种行为吗？ 请建议。。。 提前感谢：）

你能试试这段代码吗

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

class YourComponent扩展组件{
建造师（道具）{
超级（道具）；
this.onUnload=this.onUnload.bind（this）；//如果需要将回调绑定到此
}
onUnload（event）{//将用于添加和删除事件的方法
const gohome=确认（‘回家？’）
if（gohome==真）{
console.log（'yay'）
window.location=http://yourhomepage.com'
}否则{
console.log（'yes'）
}
}
componentDidMount（）{
window.addEventListener（“beforeunload”，this.onUnload）
}
组件将卸载（）{
removeEventListener（“beforeunload”，this.onUnload）
}
render（）{
返回(
尝试使用窗口位置
)
}
}

你能试试这个代码吗

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

class YourComponent扩展组件{
建造师（道具）{
超级（道具）；
this.onUnload=this.onUnload.bind（this）；//如果需要将回调绑定到此
}
onUnload（event）{//将用于添加和删除事件的方法
const gohome=确认（‘回家？’）
if（gohome==真）{
console.log（'yay'）
window.location=http://yourhomepage.com'
}否则{
console.log（'yes'）
}
}
componentDidMount（）{
window.addEventListener（“beforeunload”，this.onUnload）
}
组件将卸载（）{
removeEventListener（“beforeunload”，this.onUnload）
}
render（）{
返回(
尝试使用窗口位置
)
}
}

尝试以下操作：

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

---

从'react router'导入{browserHistory}
从“react router redux”导入{push}；
routeBackHome（存储，prevState）}
onEnter={routeEntryHandler（商店，非UESTUserValidator）}
/>
常量routeBackHome=（存储，prevState）=>{
browserHistory.push（'/'）；
};

尝试以下操作：

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

---

从'react router'导入{browserHistory}
从“react router redux”导入{push}；
routeBackHome（存储，prevState）}
onEnter={routeEntryHandler（商店，非UESTUserValidator）}
/>
常量routeBackHome=（存储，prevState）=>{
browserHistory.push（'/'）；
};

您可以发布代码吗？请参考编辑后的问题。您是否使用中间件将浏览器历史记录与您的应用商店以及redux应用商店同步？是，我使用的是react router redux的syncHistoryWithStore方法。你可以发布代码吗？请参考编辑后的问题。你是否使用中间件将你的浏览器历史与你的商店以及你的redux商店同步？是的，我使用的是react router redux的syncHistoryWithStore方法。它不工作。仍将使用最后一个url，即/付款。其他路线看起来如何？您可以将它们粘贴到代码中吗？它可能与您的IndexRoute组件有关..因为我在一个代码笔中尝试了这一点，而且效果很好，所以这里肯定还缺少其他东西。要测试它，您应该记录加载了哪些组件。如果它只是由/payment加载的组件，那么我可能误解了你说的是哪个“后退按钮”about@juancab：用我的路线编辑问题。它将在不到一秒的时间内返回到主url，然后返回到以前的url，即/付款。通过“后退按钮”，我指的是浏览器后退按钮。当你打开主页时，总是重定向到/payment，对吗？它不起作用。仍将使用最后一个url，即/付款。其他路线看起来如何？您可以将它们粘贴到代码中吗？它可能与您的IndexRoute组件有关..因为我在一个代码笔中尝试了这一点，而且效果很好，所以这里肯定还缺少其他东西。要测试它，您应该记录加载了哪些组件。如果它只是由/payment加载的组件，那么我可能误解了你说的是哪个“后退按钮”about@juancab：用我的路线编辑问题。它将在不到一秒的时间内返回到主url，然后返回到以前的url，即/付款。通过“后退按钮”，我指的是浏览器后退按钮。当您打开主页时，始终重定向到/payment right？从“react router”导入{browserHistory}不工作react router'不包含名为'browserHistory'的导出。从'react router'导入{browserHistory}不工作。'react router“”不包含名为“browserHistory”的导出。