反应路由器：防止导航到目标路线

我使用反应路由器的历史useQueries(createHashHistory)()和我有几条路线，我想阻止导航到基于路线的配置。
所以路由的配置是这样的：反应路由器：防止导航到目标路线

<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）。

我在想听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导航无任何变化，在所有历史/路由器以及基于目标的路由配置这个决定？

来源

2016-04-09 Kiril

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

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

来源

2016-04-11 16:50:09

嗯，实际上它[可以]（https://github.com/reactjs/react-router/blob/v2.1.0/docs/guides/ConfirmingNavigation.md）。问题是我有很多路线，并希望摆脱检查重复。 – Kiril

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

@JohnWilliamDomingo，'canNavigate'可以是任何东西。在我的特殊情况下 - 这是一个静态属性。是的，你是对的重复。 – Kiril

反应路由器：防止导航到目标路线

回答

相关问题