nice

src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Routes, Route, Navigate, Outlet, useLocation } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import {useEffect, useState } from "react";
 
 import { ToastContainer } from "react-toastify";
@@ -20,49 +20,14 @@ import Settings from "./pages/settings/settings"
 import useAuth from './auth/auth';
 
 
-function App() {
-  const theme = themeFromSourceColor(argbFromHex("ffddaf"));
-  const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-  applyTheme(theme, { target: document.body, dark: systemDark });
-  return (
-    <AuthProvider>
-    <>
-      <ToastContainer
-        position="top-right"
-        autoClose={2000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick={false}
-        rtl={false}
-        theme={"light"}
-        // transition={Bounce}
-      />
-      <Router>
-        <Routes>
-          <Route path="/login" element={<Login />} />
-          <Route path="/register" element={<Register />} />
-
-          <Route element={<PrivateRoute />}>
-            <Route path='/' element={<Home />} />
-            <Route path='/dashboard' element={<Dashboard />} />
-            <Route path='/settings' element={<Settings />} />
-          </Route>
-
-          <Route path="*" element={<div>404</div>} />
-        </Routes>
-      </Router>
-    </>
-    </AuthProvider>
-  );
-}
-
-
 const PrivateRoute = () => {
   const { token, loading } = useAuth();
+  const navigate = useNavigate();
   const location = useLocation();
   const [checked, setChecked] = useState(false);
   const [isValid, setIsValid] = useState(false);
 
+
   useEffect(() => {
     const checkAuth = async () => {
       if (!token) {
@@ -83,10 +48,48 @@ const PrivateRoute = () => {
     return <div>Checking server availability...</div>;
   }
 
+  if (!isValid) {
+    navigate(`/login?to=${location.pathname}`);
+  }
+  else {
+    return <Outlet />
+  }
+}
+
+
+function App() {
+  const theme = themeFromSourceColor(argbFromHex("ffddaf"));
+  const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  applyTheme(theme, { target: document.body, dark: systemDark });
   return (
-    isValid
-      ? <Outlet />
-      : <Navigate to="/login" state={{ from: location }} replace />
+    <AuthProvider>
+    <>
+      <ToastContainer
+        position="top-right"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick={false}
+        rtl={false}
+        theme={systemDark ? "light" : "dark"}
+        // transition={Bounce}
+      />
+      <Router>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+
+          <Route element={<PrivateRoute />}>
+            <Route path='/' element={<Home />} />
+            <Route path='/dashboard' element={<Dashboard />} />
+            <Route path='/settings' element={<Settings />} />
+          </Route>
+
+          <Route path="*" element={<div>404</div>} />
+        </Routes>
+      </Router>
+    </>
+    </AuthProvider>
   );
 }