React Router Data Mode Starter

\n \n

\n \n \n

\n \n );\n}\n\nfunction Home () {\n const [count, setCount] = React.useState(0);\n return (\n

Hello, Home page

{count}

\n \n

\n );\n}\n\nfunction About () {\n const data = useLoaderData();\n \n return (\n

Hello, About page

{JSON.stringify(data, null, 2)}

\n )\n}\n\nasync function catsLoader () {\n const data = await fetch(API_URL)\n .then(res => res.json());\n return data;\n}\n\nexport const routes = [\n {\n Component: Layout,\n children: [\n {\n Component: Home,\n index: true,\n },\n {\n Component: About,\n path: \"about\",\n loader: catsLoader,\n },\n ]\n },\n]\n\nexport default routes;","label",[133],"9d0145be-3199-11f0-9330-569c3dd06744","http.tsx",12,["D",1747319628224],11,"/** @jsxImportSource https://esm.sh/react@19 */\nimport { Hono } from \"npm:hono@4\";\nimport * as React from \"https://esm.sh/react@19\";\nimport ReactDOMServer from \"https://esm.sh/react-dom@19/server\";\nimport {\n createStaticHandler,\n createStaticRouter,\n StaticRouterProvider,\n} from \"https://esm.sh/react-router\";\nimport routes from \"./routes.tsx\";\nimport api from \"./api.tsx\";\n\nconst CLIENT_MODULE = import.meta.resolve(\"./client.tsx\");\n\nconst app = new Hono();\n\n// api server\napp.get(\"/api\", async (c) => {\n return c.json([\n { name: \"Leia\", breed: \"DSH\", coat: \"Calico\" },\n { name: \"Chewie\", breed: \"DSH\", coat: \"Tuxedo\" },\n ]);\n});\n\n// react app\napp.get(\"*\", async (c) => {\n const { query, dataRoutes } = createStaticHandler(routes);\n const context = await query(c.req.raw);\n const router = createStaticRouter(dataRoutes, context);\n \n let html = await ReactDOMServer.renderToReadableStream(\n \n , {\n bootstrapModules: [ CLIENT_MODULE ],\n });\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n});\n\nexport default app.fetch;","react-router-hono",[145],"3f70a73e-3197-11f0-bd56-569c3dd06744","client.tsx","81e197a9-1333-40cc-bfe7-f5f4b3cc113a",["D",1747318612210],"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport ReactDOM from \"https://esm.sh/react-dom@19/client\";\nimport { createBrowserRouter, RouterProvider } from \"https://esm.sh/react-router\";\nimport routes from \"./routes.tsx\";\n\nconsole.log(\"client\");\n\nconst router = createBrowserRouter(routes);\n\nReactDOM.hydrateRoot(\n document, \n \n);",[153],"3f70884e-3197-11f0-bd56-569c3dd06744","README.md","464521c8-11e4-44a1-ba06-fc0039bc9dca",["D",1747318612210],"# React Router Data Mode Starter\n\nMinimal React Router starter example in [\"data mode\"][modes] with server-side rendering for Val Town\n\n[View demo][demo]\n\n## How it works\n\nThe `http.tsx` file is the main server that responds with an HTML stream, using React Router.\nThe HTML includes a `

Diff · v14