reactjs - 登录重定向渲染两次

Question

我正在为我的路线使用到达路由器。如果用户未登录，我能够保护仪表板并公开登录页面并重定向，但现在如果我输入一个 url，它将执行快速重定向以登录，然后返回主页，而不是实际输入的页面。

我注意到由于使用 useEffect 来获取组件呈现两次的用户：1 没有用户（重定向到登录）另一个有用户并重定向到主页。

路由文件

const AdminRoutes = () => {
  return (
    <Router>
      <MainLayout path="/admin">
        <HomePage path="/" />
        <CarTransfer path="/cartransfers">
          <CarTranserList path="/list" />
          <CarTransferCreate path="/new" />
        </CarTransfer>
        <User path="/users">
          <UserList path="/list" />
          <UserCreate path="/new" />
        </User>
      </MainLayout>
      <LoginPage path="/login" />
    </Router>
  );
};

布局文件

import { useState, useEffect } from "react";
import { Redirect, useNavigate } from "@reach/router";
import { Layout } from "antd";
import SiderMenu from "./SiderMenu";
import LayoutBanner from "./LayoutBanner";

import { useSelector, useDispatch } from "react-redux";
import {
  userSelector,
  fetchUserBytoken,
  clearState,
} from "../../features/authSlice";

const { Content } = Layout;

const MainLayout = ({ children }) => {
  const user = useSelector(userSelector);
  const [collapsed, setCollapsed] = useState(false);

  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { isFetching, isError } = useSelector(userSelector);

  useEffect(() => {
    dispatch(
      fetchUserBytoken({
        token: localStorage.getItem("token"),
        id: localStorage.getItem("id"),
      })
    );
  }, []);

  useEffect(() => {
    if (isError) {
      dispatch(clearState());
      navigate("/login");
    }
  }, [isError]);

  const handleOnCollapse = () => {
    setCollapsed((prevState) => !prevState);
  };

  if (isFetching) {
    return <div>Loading</div>;
  }

  if (user.id === "") {
    return <Redirect noThrow to="/login" />;
  }

  return (
    <Layout>
      <SiderMenu collapsed={collapsed} handleOnCollapse={handleOnCollapse} />
      <Layout>
        <LayoutBanner
          collapsed={collapsed}
          handleOnCollapse={handleOnCollapse}
        />
        <Content>{children}</Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout;

第二个问题是如何在登录后到达登录重定向之前的同一页面。

谢谢

标签： reactjsreach-router