AOA, I want to return the output of useAuth.the output will be returned to ProtectedRoute component and as it is will be returned to layout.js. let me know if you need more info

Private Route.js

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom'
import axios from 'axios';
import Cookies from 'universal-cookie';
import { useEffect } from 'react';
let ast=null;

const ProtectedRoute = ({ component: Component, ...rest }) => {



useEffect(() => {
async function useAuth () {
    let as=null;
    const cookies = new Cookies();
    //const user = localStorage.getItem("authToken")
    //const user = cookies.get("authToken");
    const _id="633e9ed97968510b2689851b";


    if (user) {

        const config = {
      
            headers: {
                "Content-Type": "application/json",
            },
        };
        try{
            
        const {data}=await axios.post(
            `http://localhost:5000/api/auth/Veri`,
        {
            _id
        },
        config
          );

       console.log("data"  data.email);
       if(data.email){
       
        return (<Outlet />)
       }
       else{
        console.log(<Outlet />);
        return <Navigate to="authentication/card/login" />;
       }
        }
        catch(error){
            console.log("Error   ");
            ast=false;
            return <Navigate to="authentication/card/login" />;
        }
          
    } 
    
    else {
        ast=false;
        return <Navigate to="authentication/card/login" />
    }
}



useAuth() ; 

  }, []);

layout.js

<Route element={<PrivateRoutes/>}>
    <Route element={<MainLayout />}>
      {/*Dashboard*/}
      <Route path="/" element={<Dashboard />} />
      <Route path="dashboard/analytics" element={<Analytics />} />
      <Route path="dashboard/crm" element={<Crm />} />
      <Route path="dashboard/saas" element={<Saas />} />
      <Route path="dashboard/e-commerce" element={<Ecommerce />} />
</Route>
    </Route>

CodePudding user response：

You can not use a component returned from useEffect instead you should be using a state for this.

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom'
import axios from 'axios';
import Cookies from 'universal-cookie';
import { useEffect, useState, useNavigate } from 'react';
let ast=null;

const ProtectedRoute = ({ component: Component, ...rest }) => {

  const [authenticated, setAuthenticated] = useState(null);
  const navigate = useNavigate();
      
  useEffect(() => {
    let as=null;
    const cookies = new Cookies();
    const _id="633e9ed97968510b2689851b";

    //IDK where the **user** comes from
    if (user) {
        const config = {
            headers: {
                "Content-Type": "application/json",
            },
        };
        try{
          const {data}=await axios.post(
            `http://localhost:5000/api/auth/Veri`,
          {
            _id
          },
          config
          );
          console.log("data" ,data.email);
          if(data.email){
            setAuthenticated(true);
          }
          else{
             setAuthenticated(false);
          }
        }
        catch(error){
          console.log("Error   ");
          ast=false;
          setAuthenticated(false);
        }
    }
    else {
      ast=false;
      setAuthenticated(false);
    }
  }
  , []);

  useEffect(()=>{
    if(authenticated==false){
      navigate("authentication/card/login");
    }
  }, []);

  return (
    authenticated ? <Outlet/> : null
  )
}