Question

我正在使用带有历史记录useQueries(createHashHistory)()的react-router，并且我想要根据路由配置阻止导航到多个路由。
所以route配置就像：

<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} - 我想阻止导航到它并显示消息而不更改哈希和任何其他副作用（如调用{ {1}} 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的{{1}}挂钩（例如，即使用户停留在onLeave视图上，也可能会清除状态）。

问题：是否可以阻止view-2导航，而不会在历史记录/路由器中进行任何更改，并根据目标路由配置做出此决定？

Answer 1

一旦调用history.push，React就无法阻止导航。

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

React-router：阻止导航到目标路由

1 个答案: