Return function output to component in react js

Question

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>

Answer 1

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==true ? <Outlet/> : null
  )
// You can replace the null with some loader.
}