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

但它不适用于兄弟路线之间的过渡。 EG：

/ delivery /：trackingNr / slots - ＆gt; / delivery /：trackingNr / live（没有工作）
/ delivery /：trackingNr / slots - ＆gt; / delivery /：trackingNr（没有工作）

它似乎只适用于转换，而不是我过渡的路线的兄弟姐妹。 EG：

/ delivery /：trackingNr / slots - ＆gt; /地址（工作正常）

原因似乎是路由道具对于嵌套路线总是相同的。

router.setRouteLeaveHook(route, this.routerWillLeave);

有人解决了这个问题吗？

Answer 1

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

如果您使用父路线中的React.cloneElement之类的内容，则可能会覆盖route上<Timeslots>道具的价值。

仔细检查route实际上是您期望它在那里。它可能不是。

router.setRouteLeaveHook似乎无法使用嵌套路由

1 个答案: