React Private Route Not Working

JavaScript
1

I am trying to make my private route redirect the user to the login page when he or she is not authenticated with tokens. When I try to go to home page by changing the url it goes to a blank screen instead of going to login. This is my code. How can I fix my private route?


const PrivateRoute = ({ children }) => {
    const navigate = useNavigate();
    const auth = JSON.parse(localStorage.getItem('token'));
    return auth.user ? children : navigate("/login");
}

export default PrivateRoute;

function App() {

  return (
    <>
    <ToastContainer/>
    <BrowserRouter>
    <Routes>

    <Route path="/login" element={<Login/>}
    />

    <Route path="/" element={
      <PrivateRoute>
            <Home/>
      </PrivateRoute>
    }
    />

    <Route path="/register" element={<Register/>}
    />

    </Routes>
    </BrowserRouter>
    </>
  );
}
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.