useState сбрасывается с помощью history.push

Question

В своей форме я делаю следующее

import useReactRouter from 'use-react-router';

const { history } = useReactRouter();
onSubmit={async (values, { setSubmitting }) => {
  setSubmitting(true);
  fetch('/register', {
    method: 'POST',
    body: JSON.stringify(values),
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then(res => res.json())
    .then(async response => {
      setSubmitting(false);
      if (!response.success) return showAlert();
      await login();
      history.push('/profile');
    })

Логин делает это:

export const AuthContext = createContext<any>(null);

const AuthProvider = ({ children }: ProviderProps): JSX.Element => {
  const [auth, setAuth] = useState({
    isAuthenticated: false,
    user: null
  });

  const login = () => {
    fetch('/me')
      .then(res => res.json())
      .then(response => {
        if (response) setAuth({ isAuthenticated: true, user: response });
      });
  };

  const logout = () => {
    fetch('/logout').then(() =>
      setAuth({ isAuthenticated: false, user: null })
    );
  };

  return (
    <AuthContext.Provider
      value={{
        state: {
          auth
        },
        actions: {
          login,
          logout
        }
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

После регистрации `isAuthenticated возвращает true в приведенном ниже коде, но после перехода на другую страницуон снова возвращает ложь, в чем может быть проблема?

const PrivateRoute = (props: PrivateRouteProps) => {
  const { component: Component, ...rest } = props;

  const {
    state: {
      auth: { isAuthenticated }
    }
  } = useContext(AuthContext);

  console.log(isAuthenticated);

<Router>
  <div>
    <AuthProvider>
      <Header />

      <Route exact path="/" component={Home} />
      <MuiPickersUtilsProvider utils={LocalizedUtils} locale={nlLocale}>
        <Route exact path="/register" component={Register} />
      </MuiPickersUtilsProvider>
      <PrivateRoute exact path="/profile" component={Profile} />
    </AuthProvider>
  </div>
</Router>

Я ищу решение для сохранения состояния isAuthenticated после входа в систему на всех страницах, даже после нажатия другой ссылки или после вызоваhistory.push

Answer 1

Причина, по которой isAuthenticated возвращает true при первом входе на страницу профиля, но возвращается к false при переходе на другую страницу, может заключаться только в том, что компонент AuthProvider случайно перерисовывается при нажатии на ссылка и состояние повторно инициализируются.

Используете ли вы компонент <Link> для ссылок? В противном случае при переходе на другую страницу все приложение будет перерисовано, и состояние не сохранится.

Answer 2

Ваше состояние сбрасывается, поскольку в иерархии оно находится ниже Маршрутизатора.

<AuthProvider>
<Router>
  <div>

      <Header />

      <Route exact path="/" component={Home} />
      <MuiPickersUtilsProvider utils={LocalizedUtils} locale={nlLocale}>
        <Route exact path="/register" component={Register} />
      </MuiPickersUtilsProvider>
      <PrivateRoute exact path="/profile" component={Profile} />

  </div>
</Router>
</AuthProvider>