router working with navigation and links

src/about/AboutPage.tsx

@@ -0,0 +1,5 @@
+export default function AboutPage() {
+  return <>
+    Hello
+  </>
+}

src/index.scss

@@ -2,6 +2,7 @@ body {
   margin: 0;
   width: 100%;
   height: 100%;
+  background: black;
   overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

src/index.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
-import reportWebVitals from './reportWebVitals';
-import {Canvas} from "./index/Canvas";
-import {Nav} from "./nav/Nav";
+import './index.scss';
+import {RouterProvider} from "./router/RouterContext";
+import {Route} from "./router/Route";
+
+const Canvas = React.lazy(() => import("./index/Canvas"));
+const About = React.lazy(() => import("./about/AboutPage"));
+const Nav = React.lazy(() => import("./nav/Nav"));
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -11,12 +14,19 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    <Nav/>
-    <Canvas/>
+    <RouterProvider>
+      <Nav/>
+      <Route path="/">
+        <Canvas/>
+      </Route>
+      <Route path="/about">
+        <About/>
+      </Route>
+    </RouterProvider>
   </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+//reportWebVitals();

src/index/Canvas.tsx

@@ -1,7 +1,7 @@
 import {motion} from "framer-motion";
 import "./canvas.scss";
 
-export function Canvas() {
+export default function Canvas() {
   return (
     <main>
       <motion.h1 className="welcome" animate={{ rotate: 360 }}>

src/nav/Nav.tsx

@@ -5,14 +5,16 @@ import {Menu} from "./Menu";
 import wave from "../img/menu-wave.svg";
 import "./nav.scss";
 import {motion} from "framer-motion";
+import {Link} from "../router/Link";
 
-export function Nav() {
+export default function Nav() {
     const [active, setActive] = useState(false);
 
     return <>
         <nav className="header">
-            <MenuButton active={active} setActive={setActive}/>
-            <Title/>
+          <MenuButton active={active} setActive={setActive}/>
+          <Title/>
+          <Link href="/about" className="nav-item">About</Link>
         </nav>
         <Menu active={active}/>
         <img className="wave" alt="wave" src={wave}/>
@@ -23,11 +25,11 @@ function MenuButton(props : { active: boolean, setActive: (_:boolean) => void })
     const {active, setActive} = props;
 
     return (
-      <div className="menu-btn click">
+      <div className="menu-btn">
           <button>
               <FontAwesomeIcon icon={faBars} onClick={function() {
                   setActive(!active);
-              }} />
+              }}/>
           </button>
       </div>
     );
@@ -35,8 +37,8 @@ function MenuButton(props : { active: boolean, setActive: (_:boolean) => void })
 
 function Title() {
    return (
-     <a href="/" className="name click">
+     <Link href="/" className="name">
        <motion.h1>Tymur Arsentiev</motion.h1>
-     </a>
+     </Link>
    );
 }

src/nav/nav.scss

@@ -1,11 +1,11 @@
 $padding: 15px;
 $menu: #282c34;
 
-.click:hover {
+.menu-btn:hover {
   opacity: 90%;
 }
 
-.click:active {
+.menu-btn:active {
   opacity: 80%;
 }
 
@@ -25,7 +25,6 @@ $menu: #282c34;
   left: 50%;
   transform: translateX(-50%);
 
-  color: white;
 }
 
 .header {
@@ -40,7 +39,6 @@ $menu: #282c34;
 .name {
   align-self: center;
   flex-grow: 1;
-  text-decoration: underline;
 }
 .wave {
   position: absolute;

src/router/Link.tsx

@@ -0,0 +1,21 @@
+import "./link.scss";
+
+import React, {PropsWithChildren} from "react";
+import {useRouter} from "./RouterContext";
+import {Path} from "./router";
+
+export function Link(props: {className: string, href: Path, replace?: boolean } & PropsWithChildren) {
+  const {children, className, href, replace} = props;
+  const router = useRouter();
+
+   function onClick(event: React.MouseEvent) {
+        event.preventDefault();
+        if(replace) {
+          router.replacePage(props.href);
+        } else {
+          router.pushPage(props.href);
+        }
+   }
+
+  return <a onClick={onClick} href={href} className={`${className} link click`}>{children}</a>
+}

src/router/Route.tsx

@@ -0,0 +1,10 @@
+import {PropsWithChildren} from "react";
+import {useRouter} from "./RouterContext";
+import {Path} from "./router";
+
+export function Route(props: PropsWithChildren & {path: Path}) {
+  const {path, children} = props;
+  const router = useRouter();
+
+  return router.current === path ? <>{children}</> : <></>
+}

src/router/RouterContext.tsx

@@ -1,14 +1,37 @@
-import {createContext, PropsWithChildren, useContext, useSyncExternalStore} from "react";
-
-const RouterContext = createContext<{}>({});
+import {createContext, PropsWithChildren, useContext, useEffect, useState, useSyncExternalStore} from "react";
+import {DEFAULT, Path, Router} from "./router";
 
+const RouterContext = createContext<Router>(DEFAULT);
 export function useRouter() {
   return useContext(RouterContext);
 }
 
-export function RouterProvider(props : PropsWithChildren) {
 
-  return <RouterContext.Provider value={{}}>
+export function RouterProvider(props : PropsWithChildren) {
+  // path is replaced on every state push/replace/pop
+  const [path, setPath] = useState<Path>(window.location.pathname as Path);
+
+  // handle the back/forward button
+  useEffect(() => {
+    function subscribe(ev: PopStateEvent) {
+      setPath(ev.state as Path);
+    }
+
+    window.addEventListener("popstate", subscribe);
+    return () => window.removeEventListener("popstate", subscribe);
+  }, []);
+
+  return <RouterContext.Provider value={{
+    pushPage: function(newPath: Path) {
+      window.history.pushState(newPath,"", newPath);
+      setPath(newPath as Path);
+    },
+    replacePage: function(newPath: Path) {
+        window.history.replaceState(newPath, "", newPath);
+        setPath(newPath as Path);
+    },
+    current: path
+  }}>
     {props.children}
   </RouterContext.Provider>
 }

src/router/link.scss

@@ -0,0 +1,12 @@
+.link {
+  color: white;
+  text-decoration: underline;
+}
+
+.link:hover {
+  opacity: 90%;
+}
+
+.link:active {
+  opacity: 80%;
+}

src/router/router.ts

@@ -0,0 +1,13 @@
+export type Router = {
+  replacePage: (path: Path) => void;
+  pushPage: (path: Path) => void;
+  current: Path
+}
+
+export type Path = `/${string}`;
+
+export const DEFAULT : Router = {
+  current: window.location.pathname as Path,
+  pushPage: function(){},
+  replacePage: function(){}
+};