react中出现某种情况如何停止渲染组件？

Question

我正在构建一个具有登录功能的项目（待办事项应用程序）， 在此 Home 组件中，我必须检查 localStorage 中是否未设置令牌，然后导航到登录组件，

但是在导航之后，Home组件仍然呈现，并且在这个组件中我有API调用，所以由于在localStorage中找不到令牌，它会抛出错误“Unauthorized”

家庭组件：

import React, { useEffect } from "react";
import NotesContainer from "./NotesContainer";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";

function Home() {
    const navigate = useNavigate();

    useEffect(() => {
        if (!localStorage.getItem("token")) {
            navigate("/login");

            // for toast
            toast.error("Please login", {
                position: "top-right",
                autoClose: 5000,
                hideProgressBar: false,
                closeOnClick: true,
                pauseOnHover: true,
                draggable: true,
                progress: undefined,
                theme: "dark",
            });
        }
    }, []);

    return (
        <>
            <div className=" mt-4 px-2">
                <h1 className="text-4xl text-center font-semiboldbold underline underline-offset-2">
                    Your Notes
                </h1>
            </div>
            <div>
                <NotesContainer />
            </div>
        </>
    );
}

export default Home;

在 NotesContainer 组件侧面，我有 API 调用。

**注释容器：**

import React, { useContext, useEffect } from "react";
import Note from "./Note";
import NoteModal from "./NoteModal";
import NoteContext from "../context/notes/NoteContext";

function NotesContainer() {
    const { notes, setAdding, setIsOpen, setCurrentNote, getNotes } =
        useContext(NoteContext);

    useEffect(() => {
        getNotes();
    }, []);

    return (
        <div className="px-3">
            <NoteModal />
            <div className="text-center mt-2 sm:text-end sm:mt-0npm st">
                <button
                    onClick={() => {
                        setCurrentNote({ title: "", description: "" });
                        setAdding(true);
                        setIsOpen(true);
                    }}
                    className="bg-slate-700 rounded-lg text-white text-md p-2 hover:scale-105"
                >
                    <span className="fas fa-plus "> </span>
                    &nbsp; Add New Note
                </button>
            </div>
            <div className="mt-3 flex justify-evenly flex-wrap gap-3">
                {notes.map((note) => (
                    <Note key={note._id} note={note} />
                ))}
            </div>
        </div>
    );
}

export default NotesContainer;

在当前场景中，当我转到 home 组件时，它将检查令牌，如果未设置令牌，那么它将导航到登录组件，但 home 组件仍在渲染，因此我的 API 调用会生成并抛出错误

所以，我希望，如果在 localStorage 中未设置令牌，则在渲染 Home 组件之前导航到登录。这样我们就可以停止该 API 调用。

Answer 1

不要等待组件安装并运行效果钩子（这已经太晚了），而是使用条件渲染来渲染

<Navigate>

组件。

这将避免渲染您的

<NotesContainer>

以及任何未经身份验证的 API 调用。

import { Navigate } from "react-router-dom";

function Home() {
  // ...

  if (!localStorage.getItem("token")) {
    return <Navigate to="/login" />;
  }

  return (
    <>
      { /* ... */ }
    </>
  );
}