React-router: ngăn điều hướng nhắm mục tiêu tuyến

Question

Tôi đang sử dụng bộ phản ứng-bộ định tuyến với lịch sử useQueries(createHashHistory)() và tôi có một số tuyến đường mà tôi muốn ngăn điều hướng dựa trên cấu hình của tuyến đường.
Vì vậy, các tuyến cấu hình giống như:

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

Vì vậy, chúng ta hãy giả sử tôi đang trên #/view-2 và gọi một hành động như history.push({pathname: '/view-1'});. Nhưng ngay sau khi tuyến đường view-1 có cờ canNavigate={false} - Tôi muốn ngăn điều hướng đến đó và hiển thị thông báo mà không thay đổi hàm băm và bất kỳ tác dụng phụ nào khác (như gọimóc view-2).

Tôi đã suy nghĩ về nghe history:

history.listenBefore((location, callback) => { 
    //e.g. callback(false) to prevent navigation 
}) 

nhưng tôi không thể có được dụ tuyến đường để kiểm tra canNavigate cờ.
Sau đó tôi đã phát hiện ra rằng history có một phương pháp match mà thực sự được nhà nước router tiếp theo dựa trên trao location:

history.listenBefore((location, callback) => { 
    history.match(location, (error, redirectLocation, nextState) => { 
     const route = _.last(nextState.routes); 
     if (route.canNavigate) { 
      callback(); 
     } else { 
      callback(false); 
     } 
    }); 
}) 

nhưng vấn đề là history.match cuộc gọi onLeave móc cho view-2 bên trong (có thể, đối với ví dụ, trạng thái rõ ràng ngay cả khi người dùng ở trên chế độ xem view-2).

Câu hỏi: là nó có thể để ngăn chặn chuyển hướng từ view-2 mà không cần bất kỳ thay đổi nào cả trong lịch sử/router và đưa ra quyết định này dựa trên cấu hình đường mục tiêu?

Answer 1

Phản ứng không thể ngăn điều hướng khi bạn đã gọi history.push.

Bạn nên đóng gói dịch vụ lịch sử bằng một dịch vụ tùy chỉnh sẽ kiểm tra xem có thể điều hướng hay không và nếu đó là dịch vụ lịch sử gọi là history.push. nếu không, hãy ngăn điều hướng và giữ trạng thái.