React路由器:防止导航到目标路由

React-router: prevent navigation to target route

本文关键字：目标 路由 导航 路由器 React      更新时间：2024-04-01

我使用的是具有历史useQueries(createHashHistory)()的react路由器，我有几个路由要根据路由的配置阻止导航到
所以路由配置是这样的：

<Route path="/" name={RouteNames.APP} component={AppContainer}>
    <Route path="view-1"
        onEnter={ view1onEnter }
        onLeave={ view1onLeave }
        component={ View1 }
        canNavigate={ false }
    />
    <Route path="view-2"
        onEnter={ view2onEnter }
        onLeave={ view2onLeave }
        component={ View2 }
        canNavigate={ true }
    />
    ...
</Route>

假设我在#/view-2上，并调用类似history.push({pathname: '/view-1'});的操作。但是一旦路由view-1有了标志canNavigate={false}，我就想阻止导航到它，并显示一条消息，而不更改哈希和任何其他副作用（比如调用view-2的onLeave钩子）。

我在考虑听history:

history.listenBefore((location, callback) => {
    //e.g. callback(false) to prevent navigation
})

但我无法让路由实例检查canNavigate标志
后来我发现history有一个方法match，它实际上基于给定的location:获得下一个路由器状态

history.listenBefore((location, callback) => {
    history.match(location, (error, redirectLocation, nextState) => {
        const route = _.last(nextState.routes);
        if (route.canNavigate) {
            callback();
        } else {
            callback(false);
        }
    });
})

但问题是history.match在内部为view-2调用onLeave钩子（例如，即使用户停留在view-2视图上，也可能清除状态）。

问题：是否可以在历史/路由器没有任何更改的情况下阻止从view-2进行导航，并根据目标路线配置做出此决定？

React在调用history.push.后无法阻止导航

您应该用一个自定义的历史记录服务封装历史记录服务，该服务将检查是否可以导航，如果可以，则调用history.push。否则，将阻止导航并保留状态。

相关文章：