hot

app/comps/Navbar.jsx

@@ -4,9 +4,8 @@ import NavItem from "./nav/NavItem"
 export default function NavBar(props) {
     return (
         <div className="navbar-cont">
-            <NavItem text="Home" route={props.route}/>
-            {/* <NavItem text="About" route={props.route}/> */}
-            <NavItem text="Privacy" route={props.route}/>
+            <NavItem text="Home" route={props.route} setPage={props.setPage}/>
+            <NavItem text="Privacy" route={props.route} setPage={props.setPage}/>
         </div>
     )
 }

app/comps/nav/NavItem.jsx

@@ -1,20 +1,12 @@
-import { useNavigate, useRevalidator } from "@remix-run/react";
-
 export default function NavItem(props) {
-    const navigate = useNavigate();
-    const revalidator = useRevalidator();
 
     return(
         <p 
-            className={`
-                navbar-item 
-                ${props.text.toLowerCase() === props.route && "nav-sel"}
-            `}
-            onClick={() => {
-                navigate("/" + props.text.toLowerCase())
-                revalidator.revalidate();
-            }}
-            >
+        className={`navbar-item ${props.text.toLowerCase() === props.route && "nav-sel"}`}
+        onClick={() => {
+            props.setPage(props.text.toLowerCase())
+        }}
+        >
             {props.text}
         </p>
     )

app/entry.client.jsx

@@ -12,7 +12,7 @@ startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser basename="/fontaine/" />
+      <RemixBrowser/>
     </StrictMode>
   );
 });

app/root.jsx

@@ -6,9 +6,7 @@ import {
   Scripts,
   ScrollRestoration
 } from "@remix-run/react"
-import NavBar from "./comps/Navbar"
 import "../styles.scss"
-import { useLoaderData } from "@remix-run/react"
 
 export const clientLoader = async ({ request }) => {
   return request.url.split('fontaine/')[1]
@@ -37,7 +35,6 @@ export default function App() {
   return (
     <div className="main">
       <div className="main-content">
-        <NavBar route={useLoaderData()} />
         <Outlet />
       </div>
     </div>

app/routes/_index.jsx

@@ -1,4 +1,9 @@
+import React, {useState} from "react"
+import NavBar from "../comps/Navbar"
 import "../../styles.scss"
+import { useLoaderData } from "@remix-run/react"
+import Home from "../pages/home"
+import Privacy from "../pages/privacy"
 
 export const meta = () => {
   return [
@@ -7,8 +12,20 @@ export const meta = () => {
   ]
 }
 
+export const clientLoader = async ({ request }) => {
+  return new URL(request.url).searchParams.get("param");
+}
+
 export default function Index() {
+  const [page, setPage] = useState(useLoaderData() ?? "home")
   return (
-    <></>
+    <>
+    <NavBar route={page} setPage={setPage} />
+    {page === "home" ? (
+      <Home />
+    ) : (
+      <Privacy />
+    )}
+    </>
   )
 }