"<i>Uncaught Error: Too many re-renders.<\/i>未捕获的错误：重新渲染过多。<\/b> <i>React limits the number of renders to prevent an infinite loop - ProtectedRoutes Component<\/i> React 限制渲染次数以防止无限循环 - ProtectedRoutes 组件<\/b>"

Question

I am attempting to create a ProtectedRoutes component, however, I seem to have created an infinite loop somewhere that I can't seem to figure out. I'm a beginner.

import React, { Component, useState } from "react";
import { Route, Navigate } from "react-router-dom";
import Cookies from "universal-cookie";
const cookies = new Cookies();


export default function ProtectedRoutes({component: Component, ...rest}) {
    const [auth, setAuth] = useState(false);
    //get cookie from browser if logged in
    const token = cookies.get("TOKEN");
    if (token) {
        setAuth(true);
    };
    
    return auth ? <Component /> : <Navigate to="/" />
}

Answer 1

Yow problem Is heaw.

export default function ProtectedRoutes({component: Component, ...rest}) {
    const [auth, setAuth] = useState(false);
    //get cookie from browser if logged in
    const token = cookies.get("TOKEN");
    if (token) {
        setAuth(true);
    };
    
    return auth ? <Component /> : <Navigate to="/" />
}

Answer 2

In ProtectedRoutes<\/code> component, you're setting a state ( setAuth<\/code> in this case) directly inside the component, this is what happens when you do that:

export default function ProtectedRoutes({component: Component, ...rest}) {
    ...
    if (token) {
        setAuth(true);
    };
    ...
}