React中无token时如何阻止Home组件渲染避免API报错？

问题核心 #

当前Home组件通过useEffect校验token并导航，但useEffect在组件挂载后执行，会先渲染NotesContainer组件，触发其内部的getNotes API请求，此时无有效token导致"Unauthorized"错误。需要在Home组件渲染子组件前完成token校验与导航，阻止无效API请求。

解决方案 #

将token校验逻辑提前到组件渲染阶段，通过条件渲染控制子组件的加载：

1. 先获取localStorage中的token
2. 若token不存在，在useEffect中执行导航并提示，同时返回空JSX（或加载状态），避免渲染NotesContainer
3. 若token存在，正常渲染Home组件内容

修改后的Home组件代码 #

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();
    const token = localStorage.getItem("token");

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

    // 无token时不渲染子组件，直接返回空
    if (!token) {
        return null;
    }

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

export default Home;

原理说明 #

• 原代码中useEffect属于挂载后钩子，组件会先完成所有DOM渲染（包括NotesContainer），再执行导航逻辑，导致API请求已发出。
• 修改后，组件在渲染阶段就判断token，无token时直接返回空，NotesContainer不会被挂载，其内部的getNotes请求也就不会触发；同时useEffect负责执行导航操作，避免直接在渲染阶段调用navigate引发的状态更新警告。

可选优化 #

如果希望在全局层面统一处理路由权限，可以使用react-router-dom的路由守卫（如Navigate组件或自定义路由组件），将token校验逻辑抽离，避免在每个受保护页面重复编写代码。

内容的提问来源于stack exchange，提问作者Prince Sadariya