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

Question

我正在使用 react-router with react-router-redux 来实施 SPA。我想实现这样一个 UI:

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

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

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

提前致谢。

Answer 1

了解 onEnter 等 react-router 钩子。您可以在路由中确定它们。

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

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

React router path validation and redirection

reactjs

react-router

react-router-redux