Always getting redirected to homepage on refresh from any route in app

I am using functional component which provides authentication to the specific routes such as /home using server side authentication and local storage, happening in OnSubmit event of my of login page.

Everything works fine I am getting redirected to homepage after successful login, the problem arises when I refresh the page from any route I am always getting redirected to home page, why is that so?

The problem arises in production as well as in development, anyone please suggest me a way to fix this

My App.js file is


import React, { useState, useEffect } from 'react';
import Swal from 'sweetalert2';
import {
  BrowserRouter as Router,
} from 'react-router-dom';

import LoginPage from './login/LoginPage';
import HomePage from './home/HomePage';
import Courses from './courses/Courses';
import Profile from './profile/Profile';
import Notes from './notes/Notes';
import Contact from './contact/Contact';
import Students from './students/Students';
import OnlineClass from './onlineClass/OnlineClass';
import NotFound from './notfound/NotFound';
import UpdateClass from './updateData/UpdateClass';
import UpdateNotes from './updateData/UpdateNotes';

const App = () => {
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    const loggedUser = localStorage.getItem('user');
    if (loggedUser) {
  }, []);

  const handleLoggedIn = () => {

  const handleLogout = () => {{
      title: 'Are you sure?',
      showDenyButton: true,
      showCancelButton: true,
      confirmButtonText: `Yes`,
      denyButtonText: `No`,
    }).then((result) => {
      if (result.isConfirmed) {
      } else if (result.isDenied) {'Welcome back!', '', 'info');

  return (
          <Route exact strict path='/'>
            {!loggedIn ? (
              <LoginPage handleLoggedIn={handleLoggedIn} />
            ) : (
              <Redirect to='/home' />
          <Route exact path='/home'>
            <HomePage handleLogout={handleLogout} loggedIn={loggedIn} />
          <Route exact path='/profile'>
            <Profile loggedIn={loggedIn} handleLogout={handleLogout} />
          <Route exact path='/courses'>
            <Courses loggedIn={loggedIn} handleLogout={handleLogout} />
          <Route exact path='/notes'>
            <Notes loggedIn={loggedIn} handleLogout={handleLogout} />
          <Route exact path='/contact'>
            <Contact loggedIn={loggedIn} handleLogout={handleLogout} />
          <Route exact path='/students'>
            <Students loggedIn={loggedIn} handleLogout={handleLogout} />
          <Route exact path='/class'>
            <OnlineClass loggedIn={loggedIn} handleLogout={handleLogout} />

          <Route exact path='/class/update/:id'>
            {!loggedIn ? (
              <LoginPage handleLoggedIn={handleLoggedIn} />
            ) : (
              <UpdateClass />
          <Route exact path='/notes/update/:id'>
            {!loggedIn ? (
              <LoginPage handleLoggedIn={handleLoggedIn} />
            ) : (
              <UpdateNotes />
            <NotFound />

export default App;
<script src=""></script>
<script src=""></script>

Source: Ask Javascript Questions