React-router：防止导航到目标路线

Question

我正在使用带有历史记录 useQueries(createHashHistory)() 的 react-router，并且我有几条路线我想根据路线的配置阻止导航到。
所以路由配置是这样的：

<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} - 我想阻止导航到它并显示一条消息而不更改哈希和任何其他副作用（比如调用 onLeave 钩子view-2)。

我在考虑听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 在内部调用onLeave 钩子以获取view-2（例如，即使用户停留在view-2 视图上，也可能清除状态）。

问题：是否有可能阻止从view-2 导航而不对历史/路由器进行任何更改并根据目标路由配置做出此决定？

Answer 1

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

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