Javascript – How to use a React-Router for checking whether to load the component or not

So If I understand this correctly, (correct me if am wrong), what you want to do is whenever someone lands on your site your app should first check if a user is eligible to go to home page or they should be sent back to login page, so this is how I used to tackle this situation

My Router –

 return (
    <Router>
      <Routes>
        <Route element={<Auth />}>
          <Route
            path="/"
            element={(
              <React.Suspense fallback={<Loading />}>
                <Login />
              </React.Suspense>
          )}
          />
          <Route
            path="/:FileId"
            element={(
              <React.Suspense fallback={<Loading />}>
                <Dashboard />
              </React.Suspense>
          )}
          />
        </Route>

      </Routes>
    </Router>
  );

So here I had two routes in my app one was the login route and another was simply the page where files were used to render this was a Notion clone, Let’s say someone directly tried to land on the file page using the URL that contains the id of that file so to tackle this i wrapped my routes in a parent route called outlet, so whenever anyone lands on any of these routes first the parent route or outlet will run

Here is the code of the outlet element i.e Auth component

import {
  useEffect, useState, React,
} from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import Login from '../Pages/Login/Login';
import Loading from '../Components/Loading/Loading';

function Auth() {
  const Navigate = useNavigate();

  const [AuthCheck, setAuthCheck] = useState(null);
  const url = import.meta.env.VITE_URL;
  const [LastVisitiedFileId, setLastVisitiedFileId] = useState(null);

  const GetLastVisitedFileId = async () => {
    const res = await fetch(`${url}/lastvisitedfile`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'x-auth-token': localStorage.getItem('token'),
      },
    });
    const data = await res.json();
    if (data.status === 200) {
      setLastVisitiedFileId(data.data);
      localStorage.setItem('LastVisitedFileId', data.data);
    } else {
      console.log('something went wrong');
    }
  };

  const PrivateRoutes = async () => {
    const res = await fetch(`${url}/verify_route`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-auth-token': localStorage.getItem('token'),
      },
    });
    const data = await res.json();

    if (data.status === 201) {
      const FileId = localStorage.getItem('LastVisitedFileId');
      if (FileId === '' || FileId === null || FileId === undefined) {
        await GetLastVisitedFileId();
      } else {
        setLastVisitiedFileId(FileId);
      }
      setAuthCheck(true);
    } else {
      setAuthCheck(false);
    }
  };

  // made a use effect here so that whenever this file is invoked through app.js then
  // this function must runs  otherwise it will have the default values in it

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token === '' || token === undefined) {
      setAuthCheck(false);
    } else {
      PrivateRoutes();
    }
  });

  // useEffect(() => {

  // }, [AuthCheck]);

  return (
    <div>
      {
            AuthCheck === true
              ? window.location.pathname === '/'
                ? Navigate(`/${LastVisitiedFileId}`)
                : <Outlet />
              : AuthCheck === false
                ? <Login />
                : <Loading />
            }
    </div>
  );
}

export default Auth;

This code can look a little big at first sight but I’ll break it up for you, so first thing’s first you don’t need to understand the GetLastVisitedFileId function it was made according to my need, so lets just focus on main logic,

Overview

So the first thing that will happen after our application enters this auth component is render something, because that’s how it works, you need to render something whenever a component runs only after that all the functions and useeffects are checked. So if you check the return statement which contains the rendering markup i am checking the value of AuthCheck now AuthCheck value is not updated yet because no function or use effect has ran yet, so to tackle this i set the initial value of AuthCheck as null, and in my rendering logic i mentioned that whenever AuthCheck is null just render the loading component , it only contains a loader, now once that is rendered now our useeffect can run ,

Authentication Logic

Now for authentication i was using JWT token so if a new user has just came for first time or there JWT is deleted from there storage then obviously there won’t be any JWT token in the storage, so i was checking if JWT is empty then just set the value of AuthCheck to false and hence login page gets rendered, else run the Verification function which checks if the Token is correct and validates it , if token gets validated and i get a 200 response from backend then i used to set the value of AuthCheck to be true and the corresponding children (Will always be Dashboard component in this case beacause there were not some other routes) used to get rendered.

Let me know if you did not understood something