switch to react location for routing

packages/docs-new/package.json

@@ -13,7 +13,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-head": "^3.4.0",
-    "react-router": "^6.2.1",
     "react-router-dom": "^6.2.1"
   },
   "devDependencies": {
@@ -29,6 +28,7 @@
     "compression": "^1.7.4",
     "esno": "^0.13.0",
     "postcss": "^8.4.5",
+    "react-location": "^3.3.0",
     "rehype-highlight": "^5.0.2",
     "remark-frontmatter": "^4.0.1",
     "tailwindcss": "^3.0.8",

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 type { ReactLocation } from "react-location"
-import { Link } from "react-router-dom"
+import { Link, Outlet, Router } from "react-location"
-import { DocumentPage } from "./pages/document-page"
+import { routes } from "./routes"
-import { LandingPage } from "./pages/landing-page"
 
-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>
+      <Outlet />
-        <Route path="/" element={<LandingPage />} />
+    </Router>
-        <Route path="docs/*" element={<DocumentPage />} />
-      </Routes>
-    </>
   )
 }

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 />
+    <App location={location} />
-    </HeadProvider>
+  </HeadProvider>,
-  </BrowserRouter>,
   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 />
+      <App location={location} />
-      </HeadProvider>
+    </HeadProvider>,
-    </StaticRouter>,
   )
 
   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 />),
+      },
+    ],
+  },
+]

pnpm-lock.yaml

@@ -129,7 +129,7 @@ importers:
       react: ^17.0.2
       react-dom: ^17.0.2
       react-head: ^3.4.0
-      react-router: ^6.2.1
+      react-location: ^3.3.0
       react-router-dom: ^6.2.1
       rehype-highlight: ^5.0.2
       remark-frontmatter: ^4.0.1
@@ -143,7 +143,6 @@ importers:
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
       react-head: 3.4.0_react-dom@17.0.2+react@17.0.2
-      react-router: 6.2.1_react@17.0.2
       react-router-dom: 6.2.1_react-dom@17.0.2+react@17.0.2
     devDependencies:
       '@mapbox/rehype-prism': 0.8.0
@@ -158,6 +157,7 @@ importers:
       compression: 1.7.4
       esno: 0.13.0_typescript@4.5.4
       postcss: 8.4.5
+      react-location: 3.3.0_react-dom@17.0.2+react@17.0.2
       rehype-highlight: 5.0.2
       remark-frontmatter: 4.0.1
       tailwindcss: 3.0.8_cefe482e8d38053bbf3d5815e0c551b3
@@ -2171,6 +2171,12 @@ packages:
       babel-preset-current-node-syntax: 1.0.1_@babel+core@7.16.5
     dev: true
 
+  /babylon/7.0.0-beta.47:
+    resolution: {integrity: sha512-+rq2cr4GDhtToEzKFD6KZZMDBXhjFAr9JjPw9pAppZACeEWqNM294j+NdBzkSHYXwzzBmVjZ3nEVJlOhbR2gOQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dev: true
+
   /bail/2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
 
@@ -2922,6 +2928,11 @@ packages:
     requiresBuild: true
     dev: true
 
+  /core-js/3.20.1:
+    resolution: {integrity: sha512-btdpStYFQScnNVQ5slVcr858KP0YWYjV16eGJQw8Gg7CWtu/2qNvIM3qVRIR3n1pK2R9NNOrTevbvAYxajwEjg==}
+    requiresBuild: true
+    dev: true
+
   /core-util-is/1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: true
@@ -4197,6 +4208,16 @@ packages:
       to-regex: 3.0.2
     dev: true
 
+  /fast-async/7.0.6:
+    resolution: {integrity: sha512-/iUa3eSQC+Xh5tN6QcVLsEsN7b1DaPIoTZo++VpLLIxtdNW2tEmMZex4TcrMeRnBwMOpZwue2CB171wjt5Kgqg==}
+    dependencies:
+      '@babel/generator': 7.16.5
+      '@babel/helper-module-imports': 7.16.7
+      babylon: 7.0.0-beta.47
+      nodent-runtime: 3.2.1
+      nodent-transform: 3.2.9
+    dev: true
+
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -4893,7 +4914,6 @@ packages:
     resolution: {integrity: sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==}
     dependencies:
       '@babel/runtime': 7.16.5
-    dev: false
 
   /homedir-polyfill/1.0.3:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
@@ -7280,6 +7300,15 @@ packages:
       update-notifier: 5.1.0
     dev: true
 
+  /nodent-runtime/3.2.1:
+    resolution: {integrity: sha512-7Ws63oC+215smeKJQCxzrK21VFVlCFBkwl0MOObt0HOpVQXs3u483sAmtkF33nNqZ5rSOQjB76fgyPBmAUrtCA==}
+    requiresBuild: true
+    dev: true
+
+  /nodent-transform/3.2.9:
+    resolution: {integrity: sha512-4a5FH4WLi+daH/CGD5o/JWRR8W5tlCkd3nrDSkxbOzscJTyTUITltvOJeQjg3HJ1YgEuNyiPhQbvbtRjkQBByQ==}
+    dev: true
+
   /nopt/1.0.10:
     resolution: {integrity: sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=}
     hasBin: true
@@ -8164,6 +8193,21 @@ packages:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: true
 
+  /react-location/3.3.0_react-dom@17.0.2+react@17.0.2:
+    resolution: {integrity: sha512-0ME2sVcldYcTGB4DxbD+00wuXHY9NeACjhub3+MKOsBxnTSMQ5P2XWZZwql5IyL9Fj9IL1CjdUnoT4hCL1bCCQ==}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      '@babel/runtime': 7.16.5
+      core-js: 3.20.1
+      fast-async: 7.0.6
+      history: 5.2.0
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      ts-toolbelt: 9.6.0
+    dev: true
+
   /react-reconciler/0.26.2_react@17.0.2:
     resolution: {integrity: sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==}
     engines: {node: '>=0.10.0'}
@@ -9457,6 +9501,10 @@ packages:
     resolution: {integrity: sha512-nXIb1fvdY5CBSrDIblLn73NW0qRDk5yJ0Sk1qPBF560OdJfQp9jhl+0tzcY09OZ9U+6GpeoI9RjwoIKFIoB9MQ==}
     dev: true
 
+  /ts-toolbelt/9.6.0:
+    resolution: {integrity: sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==}
+    dev: true
+
   /tsconfig-paths/3.12.0:
     resolution: {integrity: sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==}
     dependencies: