React-router: запретить навигацию по целевому маршруту

Question

Я использую реактивный маршрутизатор с историей 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 крючок 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

React не может предотвратить навигацию после вызова history.push.

Вы должны инкапсулировать сервис истории с помощью настраиваемого, который будет проверять, можно ли перемещаться, и если он тогда вызывает history.push. в противном случае предотвратить навигацию и сохранить состояние.