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'});這樣的動作history.push({pathname: '/view-1'}); 。 但是一旦路由view-1有一個標志canNavigate={false} - 我想阻止導航到它並顯示消息而不更改散列和任何其他副作用 （比如調用onLeave 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 hook（例如，即使用戶停留在view-2視圖上，也可以清除狀態）。

問題 ：在歷史/路由器中是否可以阻止從view-2導航而根本沒有任何更改並根據目標路由配置做出此決定？

Answer 1

一旦調用history.push，React就無法阻止導航。

您應該使用自定義的服務器封裝歷史服務，該服務將檢查是否可以導航，如果是，則調用history.push。 否則阻止導航並保持狀態。