Страница перенаправления при входе в систему с использованием response-router-v5 и redux-toolkit

Ваш код не определяет логику перенаправления после входа в систему. Вы можете сделать это двумя способами.

1-й: вы можете определить другую оболочку перенаправления для аутентификации, если хотите, чтобы ваши маршруты перенаправлялись в случае аутентификации.

const AuthRoute = ({ component: Component, ...rest }) => {
  const authState = useSelector(selectorAuth)
  const location = useLocation()
  return (
    <Route
      {...rest}
      render={props => {
        if (!authState.isUserLoggedIn) {
          return <Component {...props} />
        } else {
          return (
            <Redirect
              to={{
                pathname: "/home",
                state: {
                  from: location,
                },
              }}
            />
          )
        }
      }}
    />
  )
}

const App = () => {
  return (
    <Router>
      <div tw="flex flex-col bg-green-100 min-h-screen">
        <Navbar />
        <Switch>
          // It is for login users to redirect to home page
          <AuthRoute exact path="/" component={Landing} />
          <ProtectedRoute path="/home" component={Home} />
          <ProtectedRoute path="/explore" component={Explore} />
          <Route path="*" component={() => "404 Not found."} />
        </Switch>
      </div>
    </Router>
  )
}

2-й: Другим подходом может быть императивная обработка с помощью history.push () или history.replace ():

const Layout = () => {
  const authState = useSelector(selectorAuth);
  const history = useHistory();

  useEffect(() => {
    // if isUserLoggedIn turned to true redirect to /home
    if (authState.isUserLoggedIn) { 
      history.push("/home");
    }
  }, [authState.isUserLoggedIn]); // triggers when isUserLoggedIn changes

  return (
    <Switch>
      <Route exact path="/" component={Landing} />
      <ProtectedRoute path="/home" component={Home} />
      <ProtectedRoute path="/explore" component={Explore} />
      <Route path="*" component={() => "404 Not found."} />
    </Switch>
  );
};

const App = () => {
  return (
    <Router>
      <div tw="flex flex-col bg-green-100 min-h-screen">
        <Navbar />
        <Layout />
      </div>
    </Router>
  );
};

Почему ваш код не работал? Взгляните на код ниже:

      <Route exact path="/" component={Landing} />
      <ProtectedRoute path="/home" component={Home} />
      <ProtectedRoute path="/explore" component={Explore} />
      <Route path="*" component={() => "404 Not found."} />

Что он делает? Он проверяет путь в вашем браузере и проверяет, соответствует ли он заданному правилу маршрута сверху вниз. Если путь маршрута совпадает, тогда он отображает компонент, если нет, он продолжает вниз, посещая каждый из маршрутов, пока он не совпадет с вашим 404.

Итак, вернемся к вашему случаю; когда вы входите в систему, вы не покидаете путь «/». Потому что не реализована логика, позволяющая покинуть путь «/». Таким образом, он снова совпадает с целевой страницей, даже если он аутентифицирован. Он совпадает с путем маршрута (целевая страница) и остается там. Это не продолжается и попробуйте свою логику на ProtectedRoute.

Текущий принятый ответ устраняет ваши проблемы, но не определяет должным образом причину, по которой у вас возникли проблемы. Итак, я хочу объяснить это вам (и всем, кто это читает).

Проблема: слишком быстрое перенаправление

const attemptLogin = e => {
  e.preventDefault()
  dispatch(tryLogin(username, password))
  history.push("/home")
}

Этот код отправляет tryLogin и немедленно вызывает history.push("/home"). Он не ждет завершения отправленного действия и обновления хранилища.

Когда вы вызываете history.push("/home"), ваше приложение загружает ProtectedRoute для компонента Home. Внутри ProtectedRoute вы используете селектор для проверки значения authState.isUserLoggedIn. Если это false, вы перенаправляете на "/".

Таким образом, если вы перенаправляете на "/home" до того, как значение authState.isUserLoggedIn было обновлено, вы в конечном итоге будете перенаправлены обратно на "/" вместо того, чтобы иметь возможность просматривать компонент Home.

Вот почему у вас возникают следующие проблемы с асинхронной аутентификацией:

Когда я пытаюсь выполнить аутентификацию без какой-либо асинхронной функции (например, сравнивая имя пользователя и пароль с жестко запрограммированными значениями в реакции), все работает отлично.

Но когда я выполняю аутентификацию с использованием экспресс и mongo, перенаправление при входе в систему перестает работать.

Решение: дождитесь перенаправления

Вам нужно дождаться обновления authState перед перенаправлением на защищенный маршрут.

Есть много способов сделать это, но в целом мы хотим использовать селекторы для прослушивания изменений, отправляемых в состояние redux. Вот один из подходов, который использует ModalLogin для условного рендеринга Redirect компонента. Я также рекомендовал бы включить какой-то селектор для ошибок входа в систему на случай, если отправка завершилась, но вход в систему был неудачным. Вы хотели бы показать пользователю сообщение об ошибке в модальном окне.

const ModalLogin = props => {
  const { loginModalBool, setLoginModalBool } = props
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

  const dispatch = useDispatch()
  const history = useHistory()
  
  // Look at the authState from redux.  This value will automatically update.
  const authState = useSelector(selectorAuth)

  const attemptLogin = e => {
    e.preventDefault()
    dispatch(tryLogin(username, password))
    // don't redirect here anymore
  }

  // Once logged in, render the redirection
  if ( authState.isUserLoggedIn ) {
     return (
       <Redirect to="/home" />
     );
  }
  
  // Otherwise, render the modal
  return (
    /* your current code */
  )
}

честно говоря, я использую простой старый javascript для изменения местоположения, когда пользователь входит в систему

window.location = "/redirect"