How do you handle routing in React applications?

import { useState, useEffect, useSyncExternalStore } from "react";

// Two things worth demonstrating without any router dependency:
// 1. the smallest possible "router" — for an app that genuinely needs none
// 2. why filters belong in the URL rather than in useState

// ── A minimal hash router, ~15 lines ───────────────────────────────────────
const hashStore = {
  subscribe(cb) {
    window.addEventListener("hashchange", cb);
    return () => window.removeEventListener("hashchange", cb);
  },
  get: () => window.location.hash.slice(1) || "/",
  getServer: () => "/",
};
const useHash = () =>
  // The third argument is the SERVER snapshot — without it, server rendering
  // throws "Missing getServerSnapshot".
  useSyncExternalStore(hashStore.subscribe, hashStore.get, hashStore.getServer);

const parse = (hash) => {
  const [path, query = ""] = hash.split("?");
  return { path, params: new URLSearchParams(query) };
};

const ITEMS = [
  { id: 1, name: "Keyboard", tag: "input" },
  { id: 2, name: "Mouse", tag: "input" },
  { id: 3, name: "Monitor", tag: "display" },
  { id: 4, name: "Laptop", tag: "display" },
];

export default function App() {
  const hash = useHash();
  const { path, params } = parse(hash);

  // ✅ The filter lives in the URL: shareable, bookmarkable, back-button-correct.
  const urlTag = params.get("tag") || "all";
  // ❌ The same filter in component state, for contrast.
  const [stateTag, setStateTag] = useState("all");

  const go = (p, q) => { window.location.hash = p + (q ? "?" + q : ""); };

  const shown = ITEMS.filter((i) => urlTag === "all" || i.tag === urlTag);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 520 }}>
      <nav style={{ display: "flex", gap: 8, marginBottom: 10 }}>
        {["/", "/about"].map((p) => (
          <button key={p} onClick={() => go(p)} style={{ fontWeight: path === p ? "bold" : "normal" }}>
            {p}
          </button>
        ))}
      </nav>

      <div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 12 }}>
        {path === "/about" ? (
          <p style={{ fontSize: 13, margin: 0 }}>
            An about page. Fifteen lines of router, no dependency — genuinely
            enough for two or three screens with no deep linking.
          </p>
        ) : (
          <>
            <div style={{ fontSize: 13, marginBottom: 6 }}>
              <strong>✅ filter in the URL:</strong>{" "}
              {["all", "input", "display"].map((t) => (
                <button key={t} onClick={() => go("/", t === "all" ? "" : "tag=" + t)}
                        style={{ fontWeight: urlTag === t ? "bold" : "normal", marginRight: 4 }}>
                  {t}
                </button>
              ))}
            </div>
            <div style={{ fontSize: 13, marginBottom: 8 }}>
              <strong>❌ the same filter in useState:</strong>{" "}
              {["all", "input", "display"].map((t) => (
                <button key={t} onClick={() => setStateTag(t)}
                        style={{ fontWeight: stateTag === t ? "bold" : "normal", marginRight: 4 }}>
                  {t}
                </button>
              ))}
            </div>
            <ul style={{ fontSize: 13, margin: 0 }}>
              {shown.map((i) => <li key={i.id}>{i.name} <em style={{ color: "#888" }}>({i.tag})</em></li>)}
            </ul>
          </>
        )}
      </div>

      <p style={{ fontSize: 12, color: "#666", marginTop: 8, fontFamily: "ui-monospace, monospace" }}>
        location.hash = {JSON.stringify(hash)}
      </p>

      <p style={{ fontSize: 13, color: "#666" }}>
        Change the URL filter, then press the browser back button — it undoes
        the filter, and the address bar always describes what is on screen. Do
        the same with the state filter: back leaves the page entirely, and a
        copied link shows a different view than the one you were looking at.
        That is why search params are state.
      </p>
    </div>
  );
}