In react app, using private route unable to navigate to protected page once after successful login

Question

Even though my login is successful and I am getting the isAuthenticated = true, system is not redirecting to the admin component/ page in my react app. What could be the issue here, can someone please advise ? I am not getting any error.

    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.23.1",
     node v20.14.0

//PrivateRoute.js

import React from 'react';
import { Route, Navigate } from 'react-router-dom';

const PrivateRoute = ({ element, isAuthenticated, ...props }) => {
    return isAuthenticated ? (
      <Route {...props} element={element} />
    ) : (
      <Route path="/admin" element={<Navigate to="/login" />} />
    );
};

export default PrivateRoute;

//index.js:

import { createRoot } from 'react-dom/client';
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Home from "./client/components/Home";
import About from "./client/components/About";
import Login from "./client/components/Login";
import Admin from "./client/components/Admin";

import './index.css';

const App = () => {

  const [isAuthenticated, setAuthenticated] = useState(false);

  console.log("What is coming here:::"+isAuthenticated)
  // getting isAuthenticated = true 

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route
          path="/login"
          element={<Login setAuthenticated={setAuthenticated} />}
        />
       {isAuthenticated ? (
          <Route path="/admin" element={<Admin />} />
        ) : (
          <Route path="/admin" element={<Navigate to="/login" />} />
        )}
      </Routes>
    </Router>
  );
};

const root = document.getElementById('root');
const rootElement = (
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
const rootContainer = createRoot(root);
rootContainer.render(rootElement);

// Login.js

import React, { useState} from 'react';

const Login = ({ setAuthenticated  }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
  
    const handleEmailChange = (e) => {
      setEmail(e.target.value);
    };
  
    const handlePasswordChange = (e) => {
      setPassword(e.target.value);
    };
  
    const handleSubmit = (e) => {
      e.preventDefault();
      // Here you can handle form submission, like sending a request to your backend
      console.log('Email:', email);
      console.log('Password:', password);

      // Reset form fields after submission
      setEmail('');
      setPassword('');
      // Reset form fields after submission
      if (email === '[email protected]' && password === 'Admin1234') {
        console.log('Login successful');
        setAuthenticated(true); // Set loggedIn to true upon successful login
        
      } else {
        console.log('Login failed');
      }
      
    };
  
    return (
      <div className="flex justify-center items-center h-screen">
        <form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
          <div className="mb-4">
            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
              Email
            </label>
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="email"
              type="email"
              placeholder="Email"
              value={email}
              onChange={handleEmailChange}
            />
          </div>
          <div className="mb-6">
            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
              Password
            </label>
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
              id="password"
              type="password"
              placeholder="Password"
              value={password}
              onChange={handlePasswordChange}
            />
          </div>
          <div className="flex items-center justify-between">
            <button
              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="submit"
            >
              Sign In
            </button>
          </div>
        </form>
      </div>
    );
  };
  
  export default Login;

CodeSandbox link: https://codesandbox.io/p/sandbox/nice-einstein-tk7r9j?file=%2Fsrc%2Findex.js

Answer 1

In login file

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Login = ({ setAuthenticated }) => {
  const navigate = useNavigate();

  const handleLogin = () => {
  
    setAuthenticated(true);
    navigate('/admin'); // add this
  };

  return (
    <div>
      <h2>Login Page</h2>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;