I
I
Itvanya2017-02-09 11:18:52
Socket.io
Itvanya, 2017-02-09 11:18:52

Why doesn't react-router onEnter fire on the parent component after a redirect?

Guys, hello everyone. Rescue, please.
There is a standard react-redux application that works using web sockets for 2-way data flow. Authorization is implemented on cookie sessions.
The standard implementation of routing is something like this:

<Provider store={store}>
    <Router history={browserHistory}>
      <Route path="/" component={App} onEnter={App.onEnter}>
        <IndexRedirect to="/list" />

        <Route path="list" component={List} >
          <Route path=":id" component={ListElement} onEnter={ListElement.onEnter}/>
        </Route>

        <Route path="/login" component={LoginPage} />
      </Route>
    </Router>
  </Provider>

The problem is that when we successfully logged in via LoginPage, I redirect the client to '/' using browserHistory.push('/'). Everything works fine, except that after the redirect it does not work out the cherished App.onEnter (a static class method that checks user authentication). An example of how the method works is below:
static onEnter(nextState, replace, callback) {
    const { getState, dispatch } = store;
    const { auth, user } = getState();
    const { pathname } = nextState.location;

    if (!auth.isAuthenticated && !auth.error || auth.isAuthenticated && !user.id) {
      dispatch(checkUserAuth())
        .then(user => { // если юзер в системы и его сессия найдена, то сервер отдают данные юзера
          dispatch(signinUser()); // action-creator, который меняет state.auth.isAuthenticated = true
          dispatch(updateUser(user.data)); // просто заполняет данными объекты юзера(использую axios)

          replace(pathname); // далее отправляет клиента туда, куда он хочет. Главное - проверить его сессию.
          callback();
        })
        .catch(error => {
          dispatch(authenticateUser(error.message)); // обрабатываем ошибки
          replace('/login'); // отправляет обратно на /login, если юзер не имеет сессии
          callback(error);
        });
      
    } else {
      callback();
    }
  }

The code above does its job from five, but does not work with the manual browserHistory.push(`${any route here}`). The problem is doubled because given that the onEnter method does not work, I have no way to adequately connect to the websocket server after the redirect. If I just refresh the page, then all the data is picked up automatically and onEnter works perfectly, validating the user and connecting ws. Logically, onEnter must also work after a redirect, which does not happen.
I will be glad for any of your answers. I found several similar topics on stackoverflow, but none of them has a real and working answer. All the best! Thank you.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Islam Ibakaev, 2017-02-14
@devellopah

try to change
on
a .onEnter() call in the container's componentDidMount()

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question