React. js: состояние не обновляется до перенаправления URL

Question

У меня есть объект currentUser в App.state, который начинается как пустой объект до того, как пользователь вошел в систему, и получает информацию о пользователе, как только пользователь успешно входит в систему.

После успешного войдите, я звоню setState({currentUser: user}), который запрашивает обновление. Затем в componentDidUpdate() я проверяю, вызвало ли изменение currentUser обновление, и если да, я вызываю window.location.href = "/home" и визуализирую компонент <Home />.

  componentDidUpdate(prevProps, prevState) {
    // if the user just successfully logged in, redirect to home
    if (
      Object.keys(prevState.currentUser).length === 0 && // was an empty object
      Object.keys(this.state.currentUser).length > 0 // now it's been set
    ) {
      window.location.href = "/home"; // render the Home component, passing this.state.currentUser as a prop
    }
  }

в render():

  <Route
    path="/home"
    render={(props) => (
      <Home currentUser={this.state.currentUser} />
    )}
  />

Проблема в том, что когда пользователь перенаправляется на /home, this.props.currentUser по-прежнему остается пустым объектом в Home.props. Таким образом, хотя обновление до this.state.currentUser (где он явно больше не является пустым объектом) вызвало изменение маршрута /home, this.state.currentUser все еще остается пустым объектом, когда я передаю его в качестве опоры.

Что я здесь не понимаю?

Answer 1

window.location.href - допустимый способ изменить маршрут. Однако на самом деле это вызывает перезагрузку или обновление sh всей страницы. Это похоже на то, как вы вручную вводите этот URL-адрес в браузере. Следовательно, все состояния удаляются или очищаются.

Как предлагается в этой ссылке , вы должны использовать следующее:

this.props.history.push('/home')

А чтобы передать параметры, вы можете проверить эту ссылку