router changes

src/router/Link.tsx

@@ -0,0 +1,18 @@
+import React, {PropsWithChildren} from "react";
+import {useRouter} from "./RouterContext";
+
+export function Link(props: {className: string, href: string, 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}>{children}</a>
+}

src/router/Route.tsx

@@ -0,0 +1,12 @@
+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?.currentPage === path && children}
+  </>
+}

src/router/RouterContext.tsx

@@ -1,14 +1,63 @@
-import {createContext, PropsWithChildren, useContext, useSyncExternalStore} from "react";
+import {createContext, PropsWithChildren, useContext, useEffect, useSyncExternalStore} from "react";
+import {HistoryState, Path, Router} from "./router";
+import * as repl from "node:repl";
 
-const RouterContext = createContext<{}>({});
+const DEFAULT : Router = {
+  current: {
+    currentPage: window.location.pathname as Path
+  },
+  pushPage: function(){},
+  replacePage: function(){}
+};
+
+const RouterContext = createContext<Router>(DEFAULT);
 
 export function useRouter() {
   return useContext(RouterContext);
 }
 
-export function RouterProvider(props : PropsWithChildren) {
+function subscribe(onChange: () => void) {
+  window.addEventListener("popstate", onChange);
 
-  return <RouterContext.Provider value={{}}>
+  // return unsubscribe function
+  return function() {
+    window.removeEventListener("popstate", onChange);
+  }
+}
+
+function getSnapshot(): HistoryState {
+  return window.history.state ?? DEFAULT;
+}
+
+function pushState(path: string) {
+  window.history.pushState({
+      currentPage: path as Path
+    },
+    "",
+    path);
+}
+
+function replaceState(path: string) {
+  window.history.replaceState({
+      currentPage: path as Path
+    },
+    "",
+    path);
+}
+
+export function RouterProvider(props : PropsWithChildren) {
+  const state = useSyncExternalStore<HistoryState>(subscribe, getSnapshot);
+
+  // start history with initial page
+  useEffect(() => {
+    replaceState(window.location.pathname);
+  }, []);
+
+  return <RouterContext.Provider value={{
+    replacePage: replaceState,
+    pushPage: pushState,
+    current: state
+  }}>
     {props.children}
   </RouterContext.Provider>
 }

src/router/router.ts

@@ -0,0 +1,10 @@
+export type Router = {
+  replacePage: (path: string) => void;
+  pushPage: (path: string) => void;
+  current: HistoryState
+}
+
+export type Path = `/${string}`;
+export type HistoryState = {
+  currentPage: Path
+};