@Itvanya

Почему не срабатывает react-router onEnter у родительского компонента после редиректа?

Ребята, всем привет. Выручайте, пожалуйста.
Есть стандартное react-redux приложение, которое работает, используя веб-сокеты для 2-way data flow. Авторизация реализована на куки-сессиях.
Стандартная реализация роутинга примерно такая:
<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>


Проблема заключается в том, что когда мы успешно залогинились через LoginPage, я делаю редирект клиента на '/' с помочью browserHistory.push('/'). Все отрабатывает отлично, кроме того, что после редирект не отрабатывает заветное App.onEnter(статический метод класса, который проверяет аутентификацию юзера). Пример работы метода ниже:
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();
    }
  }

Код выше делает свое дело от пять, но не отрабатывает при мануальном browserHistory.push(`${any route here}`). Проблема удваивается, т.к. учитывая то, что метод onEnter не отрабатывает, я не имею возможности адекватно подключиться к websocket-серверу после редиректа. Если я просто сделаю refresh странички, то все данные подхватываются автоматически и onEnter срабатывает на отлично, валидируя юзера и подключая ws. По логике onEnter обязан отрабатывать и после редиректа, чего не происходит.
Буду рад любым вашим ответам. Нашел несколько подобных топиков на stackoverflow, но ни один из них не располагает реальным и рабочим ответом. Всем благ! Спасибо.
  • Вопрос задан
  • 450 просмотров
Пригласить эксперта
Ответы на вопрос 1
devellopah
@devellopah
попробуй поменять
<Route path="/" component={App} onEnter={App.onEnter}>

на
<Route path="/" component={App} >

а .onEnter() вызвать в componentDidMount() контейнера
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы