in the protected route console i am getting this error “uncaught TypeError: (intermediate value)(…) is undefined”

by

in the protected route console i am getting this error “uncaught TypeError: (intermediate value)(…) is undefined” the

my expectation is to get user data in the network

  • Define an asynchronous function getUser to fetch user information using an HTTP POST request to the server.

  • Dispatch showLoading action before making the request and hideLoading after receiving the response.

  • If the response is successful, update the user state in the Redux store using the setUser action.

  • If there is an error or the response is not successful, clear local storage and navigate to the login page.

  • Check if there is a valid token in the local storage.

  • If a token exists, render the children components passed to ProtectedRoute.

  • If there is no token, navigate to the login page using Navigate from react-router-dom.

the file extension is jsx

this is the protected route 

import React from "react";
import {useEffect} from "react"
import { Navigate, useNavigate } from "react-router-dom";
import axios from "axios";
import {setUser} from "../redux/userSlice"
import {useDispatch , useSelector} from "react-redux"
import {hideLoading,showLoading} from "../redux/alertsSlice"

function ProtectedRoute(props){
      const {user} = useSelector((state)=>state.user);
      const dispatch = useDispatch();
      const navigate = useNavigate();
     // const [loading, setLoading] = useState(true);
    
      const getUser  = async () =>{
        try{
            dispatch(showLoading())
            
            const response = await axios.post(
                "/api/user/get-user-info-by-id",
                {token:localStorage.getItem("token")},
                {
                    headers:{
                        Authorization:`Bearer ${localStorage.getItem("token")}`,
                    }
                },
                
            );
            console.log("Response from server:", response);  // Log the entire response
            dispatch(hideLoading());
            if(response.data.success){
                dispatch(setUser(response.data.data));
            }else {
                localStorage.clear();
                navigate("/login");
            }

        }catch(error){
            dispatch(hideLoading());
            localStorage.clear()
            navigate("/login");
        }
      };
      useEffect(()=>{
        if(!user){
            getUser();
        }
      },[user]);


      console.log("amen")

    if(localStorage.getItem("token")){
        return props.children
    } else {
        return navigate('/login');
    }
}

export default ProtectedRoute;

this is the app.jsx
import { useState } from 'react'
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Home } from './pages/Home';
import { Login } from './pages/Login';
import { Button } from "antd";
import { Register } from './pages/Register';
import { Toaster } from "react-hot-toast";
import { useSelector } from "react-redux";
import ProtectedRoute from './component/ProtectedRoute';
import PublicRoute from './component/PublicRoute';
function App() {
  const { loading } = useSelector((state) => state.alerts);

  return (
    <BrowserRouter>
     {loading && (
        <div className="spinner-parent">
          <div class="spinner-border" role="status"></div>
        </div>
      )}
          <Toaster position="top-center" reverseOrder={false} />
    <Routes>
      <Route path="https://stackoverflow.com/" element={<ProtectedRoute>
        <Home />
      </ProtectedRoute>} />
      <Route path="/login" element={<PublicRoute>
        <Login />
      </PublicRoute>} />
      <Route path="/register"  element={<PublicRoute>
        <Register />
      </PublicRoute>} />
    </Routes>
    </BrowserRouter>
  )
}

export default App

Leave a Comment