6

I'm using react-router with react-router-redux for implementation of SPA. I want to implement such a UI:

simple UI schema

The main idea that I have a list of Entitnes and if I click on an Entity, url is changed from http://domain/entities to http://domain/entities/id, where id is an Entitiy's id and the specific React component is loaded.

For performing navigation I'm using push method from react-router-redux but also I can just type a url path. But I need somehow validate url params. I want to check for id, is it in correct format and does the specific entity exist, and if not, I should rollback url to a previous state and then show an error alert.

I guess it is possible to do, but I'm a very beginner in React, so I would like to hear any advice from you.

Thanks in advance.

Pavlo Hryza
  • 627
  • 1
  • 11
  • 18

2 Answers2

8

Learn about react-router hooks like onEnter, etc. You can determine them in your routes.

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

Example:

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>
);
Yurii Kramarenko
  • 1,025
  • 6
  • 16
  • Thanks! Exactly what I'm looking for! – Pavlo Hryza May 06 '16 at 15:13
  • And how to check state in onEnter? Can't figure this out. – Igor G. Aug 13 '16 at 08:41
  • @vsync here is newer doc (for v3) `https://github.com/ReactTraining/react-router/blob/v3/docs/Glossary.md#enterhook` – Yurii Kramarenko Sep 17 '18 at 14:44
  • From react-router-v4 `onEnter` and similar properties have been removed. [Migrating from v2/v3 to v4](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md#on-properties) – rzippo Oct 29 '19 at 12:57
-1

Validation for login and router in ReactJs

if(this.state.username==="admin" && this.state.password==="1234567")
                    {
                        this.props.history.push("/Welcome");
                    }
Soma sundara
  • 157
  • 1
  • 2