反应路由器路径验证和重定向

Question

我正在使用react-router和react-router-redux来实现SPA.我想实现这样的UI:

我有一个列表的主要思想Entitnes,如果我点击的Entity,url从改变http://domain/entities到http://domain/entities/id,这里id是一个Entitiy的id和具体的阵营组件加载.

为了执行导航我正在使用push方法,react-router-redux但我也可以输入url路径.但我需要以某种方式验证urlparams.我想检查id,是否格式正确并且特定实体是否存在,如果不存在,我应该回滚url到先前的状态,然后显示错误警报.

我想这是可能的,但我是一个非常初学者React,所以我想听听你的任何建议.

提前致谢.

Answer 1

了解如路由器onEnter等反应路由器挂钩.您可以在路由中确定它们.

https://github.com/ReactTraining/react-router/blob/v3/docs/Glossary.md#enterhook

例:

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

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