Компонент перенаправления отображается, но не изменяет объект истории - PullRequest
Новая
       7

Компонент перенаправления отображается, но не изменяет объект истории

0 голосов
/ 22 сентября 2018

У меня возникла эта проблема.Когда вход в систему успешен, я устанавливаю redirect свойство избыточного состояния к пути, на который я хочу перенаправить.Мое избыточное состояние корректно обновляется.В моем компоненте Auth я вижу, что компонент Redirect отображается, и URL-адрес в браузере изменяется по указанному пути.Тем не менее, в моем родительском компоненте, когда я обращаюсь к history объекту, он все равно показывает старый URL, и поэтому Switch компонент выбирает неправильный путь.

render() {
  console.log(this.props.history.location);
  
  return (
    <div className="App">
      <p>{this.props.redirect}</p>
      <Switch>
        <Route path="/home" render={() => <p>Home page</p>} />
        <Route path="/" component={Auth} exact />
      </Switch>     
    </div>
  );
}

Здесь вывод console.log равен / (старый путь), this.props.redirect показывает /home (это новый правильный путь).

Вот компонент Auth. 

let authRedirect = null;
if (this.props.isAuthenticated && this.props.redirect) {
  authRedirect = <Redirect to={this.props.redirect} />
}

console.log(authRedirect)

return (
  <div className="Auth">
    {authRedirect}
    {form}
  </div>
);

Ведение журнала консоли authRedirect показывает, что он содержит правильный компонент Redirect после входа пользователей в систему (оба значения isAuthenticated и redirect полученыиз редукса верны).

Можете ли вы сказать мне, где ошибка?Почему объект history не обновляется, хотя все остальное работает нормально?(Изменения состояния Redux - он хорошо виден в компоненте приложения, когда он отображается во второй раз, Redirect отображается и URL-адрес в моем браузере изменяется на правильный)

ОБНОВЛЕНИЕ:

КогдаЯ помещаю console.log в метод componentDidUpdate в компоненте приложения, он показывает правильное значение this.props.history.location.

ОБНОВЛЕНИЕ 2:

Когда я помещаю журналы в render и componentDidUpdate методы в компонентах App и Auth и нажмите кнопку входа, это результат.App и Auth отображаются, в то время как history.location.pathname по-прежнему установлен на /auth, а состояние редукции правильно установлено на /.history.location.pathname правильно установлен только после визуализации компонентов в componentDidUpdate. 

[APP RENDER], location.pathname: /auth, redux - redirect: /
[AUTH RENDER], location.pathname: /auth, redux - redirect: /
[AUTH UPDATE], location.pathname: /, redux - redirect: /
[APP UPDATE], location.pathname: /, redux - redirect: /
...