router.setRouteLeaveHook 似乎不适用于嵌套路由

Question

router.setRouteLeaveHook 似乎不适用于嵌套路由。

假设我有以下路由器结构

<Route path="/" component={App}>
  <IndexRoute component={DeliveriesPage} />
  <Route path="add/:trackingNr" component={AddDeliveryPage} />
  <Route path="add" component={AddDeliveryPage} />
  <Route path="delivery/:trackingNr" component={DeliveryPage}>
    <IndexRoute component={DeliveryDetail} />
    <Route path="live" component={LiveTracking} />
    <Route path="slots" component={Timeslots} />
  </Route>
  <Route path="addresses" component={AddressesPage} />
  <Route path="address/:id" component={EditAddress} />
  <Route path="address/:id/map" component={Map} />
  <Route path="settings" component={SettingsPage} />
  <Route path="*" component={NotFoundPage} />
</Route>

并且想在Timeslots组件中设置setRouteLeaveHook方法。

class Timeslots extends Component {
  componentDidMount() {
    const { route } = this.props;
    const { router } = this.context;
    router.setRouteLeaveHook(route, this.routerWillLeave);
  }

  routerWillLeave() {
    //do something on leave
  }
}

但它不适用于兄弟路由之间的转换。例如：

/delivery/:trackingNr/slots -> /delivery/:trackingNr/live（不工作）
/delivery/:trackingNr/slots -> /delivery/:trackingNr（不工作）

它似乎只适用于过渡他们而不是我正在过渡的路线的兄弟姐妹。例如：

/delivery/:trackingNr/slots -> /address（工作正常）

原因似乎是嵌套路由的路由属性始终相同。

router.setRouteLeaveHook(route, this.routerWillLeave);

有人解决了吗？

Answer 1

很可能这里发生的是 this.props.route 的值不是你所期望的。

如果您在父路由中使用 React.cloneElement 之类的东西，您可能会覆盖 <Timeslots> 上的 route 道具的值。

仔细检查 route 是否真的如您所愿。应该不是。

router.setRouteLeaveHook 似乎不适用于嵌套路由

router.setRouteLeaveHook seems not working with nested routes

react-router