feat: some location optimization

src/app.tsx

@@ -5,8 +5,8 @@ import LoginPage from "./pages/login";
 import { AppProvider } from "./providers/AuthProvider";
 
 const HomePage: FunctionComponent = () => {
-  const location = useLocation();
-  location.route("/login");
+  const { route } = useLocation();
+  route("/login");
   return <div>Redirecting to login...</div>;
 };
 

src/components/menu.tsx

@@ -9,8 +9,8 @@ interface MenuItemProps {
 }
 
 const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemProps) => {
-  const location = useLocation();
-  const active = location.path === link;
+  const { route, path } = useLocation();
+  const active = path === link;
   const menuItemClasses = tv({
     base: classes.menu_item,
     variants: {
@@ -24,7 +24,7 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemPro
     },
   });
   return (
-    <div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => location.route(link)}>
+    <div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => route(link, true)}>
       {title}
     </div>
   );

src/pages/login.tsx

@@ -6,7 +6,7 @@ import { useLocation } from "preact-iso";
 import classes from "./login.module.scss";
 const LoginPage: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
-  const location = useLocation();
+  const { route } = useLocation();
   return (
     <div class={classes.login_container}>
       <div class={classes.login_card}>
@@ -16,7 +16,7 @@ const LoginPage: FunctionComponent = () => {
         <Button
           onClick={() => {
             isLoggedIn.value = true;
-            location.route("/profile/settings");
+            route("/profile/settings", true);
           }}
         >
           Login