reactjs - React 路由器路径验证和重定向

Question

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

我有一个列表的主要思想，Entitnes如果我单击 an Entity，url则从更改http://domain/entities为http://domain/entities/id，其中id是 an并且加载了特定的 React 组件Entitiy。id

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

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

提前致谢。

Answer 1

了解 react-router 钩子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");
                    }