使用 React Hooks 從登錄/注冊頁面重定向登錄用戶

Question

我想處理登錄用戶嘗試訪問登錄/注冊/任何相關視圖時的行為，以使用 react-hooks 將此類請求重定向到主頁。 在我的登錄表單組件之上，我嘗試過這樣的事情：

  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} />
    }
    />
  );
};

我正在使用 react-router-dom v5.1.2、react 16.9 和 react-redux 7.2.0

Answer 1

基本上你的方向是正確的，但你可以在這里利用Redirect component from react-router-dom和children prop - 定義處理邏輯並用它包裝所有公共組件的PublicRoute ：

公共路由組件：

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>

ETC...