test: rewrite playground/ssr-react without react-router (#398)

Author: hi-ogawa

playground/ssr-react/package.json

@@ -13,8 +13,7 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.0"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "workspace:*",

playground/ssr-react/public/favicon.ico

@@ -1,4 +1,4 @@
-import { Link, Route, Routes } from 'react-router-dom'
+import React from 'react'
 
 // Auto generates routes from files under ./pages
 // https://vitejs.dev/guide/features.html#glob-import
@@ -13,25 +13,68 @@ const routes = Object.keys(pages).map((path) => {
   }
 })
 
-export function App() {
+function NotFound() {
+  return <h1>Not found</h1>
+}
+
+/**
+ * @param {{ url: URL }} props
+ */
+export function App(props) {
+  const [url, setUrl] = React.useState(props.url)
+
+  React.useEffect(() => {
+    return listenNavigation(() => {
+      setUrl(new URL(window.location.href))
+    })
+  }, [setUrl])
+
+  const route = routes.find((route) => route.path === url.pathname)
+  const Component = route?.component ?? NotFound
   return (
     <>
       <nav>
         <ul>
           {routes.map(({ name, path }) => {
             return (
               <li key={path}>
-                <Link to={path}>{name}</Link>
+                <a href={path}>{name}</a>
               </li>
             )
           })}
         </ul>
       </nav>
-      <Routes>
-        {routes.map(({ path, component: RouteComp }) => {
-          return <Route key={path} path={path} element={<RouteComp />}></Route>
-        })}
-      </Routes>
+      <Component />
     </>
   )
 }
+
+/**
+ * @param {() => void} onNavigation
+ */
+function listenNavigation(onNavigation) {
+  /**
+   * @param {MouseEvent} e
+   */
+  function onClick(e) {
+    let link = e.target.closest('a')
+    if (
+      link &&
+      link instanceof HTMLAnchorElement &&
+      link.href &&
+      (!link.target || link.target === '_self') &&
+      link.origin === location.origin &&
+      !link.hasAttribute('download') &&
+      e.button === 0 &&
+      !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
+    ) {
+      e.preventDefault()
+      history.pushState(null, '', link.href)
+      onNavigation()
+    }
+  }
+  document.addEventListener('click', onClick)
+  return () => {
+    document.removeEventListener('click', onClick)
+  }
+}

playground/ssr-react/src/App.jsx

@@ -1,11 +1,8 @@
 import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
 import { App } from './App'
 
 ReactDOM.hydrateRoot(
   document.getElementById('app'),
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
+  <App url={new URL(window.location.href)} />,
 )
 console.log('hydrated')

playground/ssr-react/src/entry-client.jsx

@@ -1,11 +1,8 @@
 import ReactDOMServer from 'react-dom/server'
-import { StaticRouter } from 'react-router-dom/server'
 import { App } from './App'
 
 export function render(url) {
   return ReactDOMServer.renderToString(
-    <StaticRouter location={url}>
-      <App />
-    </StaticRouter>,
+    <App url={new URL(url, 'http://localhost')} />,
   )
 }