switch to react location for routing

packages/docs-new/src/app.tsx

@@ -1,13 +1,12 @@
 import { description } from "reacord/package.json"
 import { Meta, Title } from "react-head"
-import { Route, Routes } from "react-router"
-import { Link } from "react-router-dom"
-import { DocumentPage } from "./pages/document-page"
-import { LandingPage } from "./pages/landing-page"
+import type { ReactLocation } from "react-location"
+import { Link, Outlet, Router } from "react-location"
+import { routes } from "./routes"
 
-export function App() {
+export function App({ location }: { location: ReactLocation }) {
   return (
-    <>
+    <Router location={location} routes={routes}>
       <Title>Reacord</Title>
       <Meta name="description" content={description} />
       <nav>
@@ -15,10 +14,7 @@ export function App() {
         <Link to="docs/getting-started">Getting Started</Link>{" "}
         <Link to="docs/api">API Reference</Link>
       </nav>
-      <Routes>
-        <Route path="/" element={<LandingPage />} />
-        <Route path="docs/*" element={<DocumentPage />} />
-      </Routes>
-    </>
+      <Outlet />
+    </Router>
   )
 }

packages/docs-new/src/entry.client.tsx

@@ -1,13 +1,13 @@
 import { hydrate } from "react-dom"
 import { HeadProvider } from "react-head"
-import { BrowserRouter } from "react-router-dom"
+import { ReactLocation } from "react-location"
 import { App } from "./app"
 
+const location = new ReactLocation()
+
 hydrate(
-  <BrowserRouter>
-    <HeadProvider>
-      <App />
-    </HeadProvider>
-  </BrowserRouter>,
+  <HeadProvider>
+    <App location={location} />
+  </HeadProvider>,
   document.querySelector("#app"),
 )

packages/docs-new/src/entry.server.tsx

@@ -1,17 +1,19 @@
 import { renderToString } from "react-dom/server"
 import { HeadProvider } from "react-head"
-import { StaticRouter } from "react-router-dom/server"
+import { createMemoryHistory, ReactLocation } from "react-location"
 import { App } from "./app"
 
 export async function render(url: string) {
   const headTags: React.ReactElement[] = []
 
+  const location = new ReactLocation({
+    history: createMemoryHistory({ initialEntries: [url] }),
+  })
+
   const app = renderToString(
-    <StaticRouter location={url}>
-      <HeadProvider headTags={headTags}>
-        <App />
-      </HeadProvider>
-    </StaticRouter>,
+    <HeadProvider headTags={headTags}>
+      <App location={location} />
+    </HeadProvider>,
   )
 
   const scriptSource = import.meta.env.PROD

packages/docs-new/src/pages/document-page.tsx

@@ -1,10 +1,10 @@
-import GettingStarted from "../docs/getting-started.md"
+import { Outlet } from "react-location"
 
 export function DocumentPage() {
   return (
     <>
       <h1>Docs</h1>
-      <GettingStarted />
+      <Outlet />
     </>
   )
 }

packages/docs-new/src/routes.tsx

@@ -0,0 +1,21 @@
+import type { Route } from "react-location"
+
+export const routes: Route[] = [
+  {
+    path: "/",
+    element: () =>
+      import("./pages/landing-page").then((m) => <m.LandingPage />),
+  },
+  {
+    path: "docs",
+    element: () =>
+      import("./pages/document-page").then((m) => <m.DocumentPage />),
+    children: [
+      {
+        path: "*",
+        element: ({ params }) =>
+          import(`./docs/${params["*"]}.md`).then((m) => <m.default />),
+      },
+    ],
+  },
+]