React路由器路徑驗證和重定向

Question

我正在使用react-router和react-router-redux來實現SPA。 我想實現這樣的UI：

，我有Entitnes一個列表，如果我點擊一個Entity，url從http://domain/entities變更爲http://domain/entities/id，其中id是Entitiy「的主要思想s id並加載了特定的React組件。

對於執行導航，我使用的push方法從react-router-redux，但我也可以輸入url路徑。 但我需要以某種方式驗證url PARAMS。我想檢查id，格式是否正確，具體實體是否存在，如果沒有，我應該將url回滾到先前的狀態，然後顯示錯誤警報。

我想這是可以做的，但我是一個初學者，在React，所以我想聽聽你的任何建議。

在此先感謝。

Answer 1

瞭解有關react-router掛鉤的問題，如onEnter, etc. 您可以在您的路線中確定它們。 https://github.com/reactjs/react-router/blob/master/docs/API.md#route

例子：

var correctDataHandler = function(transition) { 
if(condition) 
    transition.redirect('/') 
}; 

var router = ReactDOM.render((
    <ReactRouter.Router history={ReactRouter.createMemoryHistory()}> 
     <ReactRouter.Route path="/" component={ AddressForm } /> 
     <ReactRouter.Route path="/map-page" component={ Map } onEnter={ correctDataHandler } /> 
     <ReactRouter.Route path="/select-product-page" component={ CardsList } /> 
     <ReactRouter.Route path="/login" component={ LoginRegisterPage } /> 
    </ReactRouter.Router>