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

Posted 2023-02-21

【中文标题】React-router：防止导航到目标路线

【英文标题】：React-router: prevent navigation to target route

【发布时间】：2016-07-30 15:02:49

【问题描述】：

我正在使用带有历史记录 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 导航而不对历史/路由器进行任何更改并根据目标路由配置做出此决定？

【参考方案1】：

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

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

【讨论】：

嗯，实际上是can。问题是我有很多路线，想摆脱检查重复。

通过重复，你的意思是你不想检查状态是否可以导航，因为每条路线已经有一个 canNavigate 道具？另一件事，canNavigate 道具是动态的还是静态的？

@JohnWilliamDomingo, canNavigate 可以是任何东西。在我的特殊情况下 - 它是一个静态属性。是的，关于重复，你是对的。