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

Question

我正在使用react-router和react-router-redux来实施SPA。 我想实现这样的UI：

我有一个Entitnes列表的主要想法是，如果我点击Entity，url，则会从http://domain/entities更改为http://domain/entities/id，其中id是Entitiy的{​​{1}}，并且已加载特定的React组件。

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

我想这是可能的，但我是url的初学者，所以我想听听你的任何建议。

提前致谢。

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

Answer 2

在 ReactJs 中验证登录和路由器

if(this.state.username==="admin" && this.state.password==="1234567")
                    {
                        this.props.history.push("/Welcome");
                    }