Перенаправить зарегистрированного пользователя со страницы входа / регистрации с помощью React Hooks

Question

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

  useEffect(() => {
  if (isAuthenticated) history.push("/dashboard");
     }, [isAuthenticated, history]);

Но каждый раз, когда зарегистрированный пользователь нажимает на кнопку входа в систему, он / она видит форму входа в систему для взгляда и глаза, и я хотел бы предотвратить это. В качестве обходного пути, я пришел с NotLoggedRoute, который имитирует поведение PrivateRoute, но я не уверен, что это лучший способ справиться с этим:

import React from "react";
import { Route, useHistory } from "react-router-dom";
import { useSelector } from "react-redux";

export const NotLoggedRoute = ({ component: Component, ...rest }) => {
  const isLogged = useSelector(state => state.user.isLogged);
  const history = useHistory();

  return (
    <Route {...rest} render={props =>
    isLogged ?  history.push("/home") :<Component {...props} />
    }
    />
  );
};

Я с использованием response-router-dom v5.1.2, реагирует 16,9 и реагирует на избыточность 7.2.0

Answer 1

В принципе, ваше направление верное, но вы можете использовать здесь Redirect компонент из react-router-dom и children prop - определите PublicRoute, который обрабатывает logi c и оборачивает все ваши публичные c компоненты:

PublicRoute Component:

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { useSelector } from 'react-redux';

const PublicRoute = ({ children, ...rest }) => {
    const isLogged = useSelector(state => state.user.isLogged);

    return (
        <Route
            {...rest}
            render={() => {
                if (isLogged) {
                    return <Redirect to="/home" />;
                }

                return children;
            }}
        />
    );
};

export default PublicRoute;

использование:

<PublicRoute path="/login">
   <Login />
</PublicRoute>

<PublicRoute path="/register">
   <Register />
</PublicRoute>

et c ...