[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_222":223,"_224":225},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_69":141,"_41":-7,"_142":-5,"_17":143,"_144":145,"_146":147,"_148":149,"_150":151,"_152":-5,"_153":-5,"_154":155,"_156":49,"_157":158,"_159":26,"_160":-5,"_161":-5,"_162":163},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","jxnblk","name","react-router-hono-starter","branchName","server-fetch","project",{"_32":40,"_13":14,"_34":100,"_47":-5,"_101":49,"_50":51,"_102":51,"_103":104,"_105":106,"_107":108,"_109":110,"_111":26,"_112":26,"_113":-5,"_114":20,"_53":54,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_128":129,"_130":131,"_132":28,"_48":49},"ahead",0,"behind",8,"diff",{"_62":63,"_64":65,"_66":67},"hasChanges",true,"sourceBranch",{"_41":56,"_13":16,"_32":57,"_39":40,"_43":33,"_44":58,"_59":51,"_60":40,"_61":54,"_55":14,"_52":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":38,"_39":40,"_41":42,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":12,"_53":54,"_55":14},"pull","id","3f6d7dac-3197-11f0-bd56-569c3dd06744","createdAt",["D",1747318612210],"updatedAt",["D",1779898921971],"main","projectId","3f6981c0-3197-11f0-bd56-569c3dd06744","version",34,"forkedBranchId","forkedBranchVersion","lockfileKey","1786296728251-esm.town_v_jxnblk_react-router-hono-starter@34-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","62a75f8d-be32-4eaa-989a-23f3433a7d42","projectName",3,"beace740-3261-11f0-833f-569c3dd06744",25,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[],"deleted",[],"modified",[68],{"_69":70,"_71":72,"_73":74},"path","routes.tsx","targetFile",{"_32":93,"_13":70,"_76":94,"_78":-5,"_79":33,"_80":58,"_81":49,"_34":95,"_41":96,"_84":85,"_86":97,"_64":49,"_88":-5,"_89":-7,"_69":98,"_91":99},"sourceFile",{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":57,"_80":56,"_81":26,"_34":82,"_41":83,"_84":85,"_86":87,"_64":49,"_88":-5,"_89":-7,"_69":90,"_91":92},"f56d7cd6-3261-11f0-a3e8-569c3dd06744","fileId","7fe99aa9-ad41-4a7f-bbc1-d35754e97603","parentId","branchId","branchVersion","latest",["D",1747405675921],2,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport {\n createBrowserRouter,\n RouterProvider,\n useLoaderData,\n Link,\n Outlet,\n} from \"https://esm.sh/react-router@7\";\n\nconst API_URL = \"https://react-router-hono.val.run/api\";\n\nfunction HTML ({ children }: {\n children: React.ReactNode;\n}) {\n return (\n \n \n React Router Hono Starter\n \n \n {children}\n \n \n )\n}\n\nfunction Layout () {\n return (\n \n

React Router Hono 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)}

React Router Hono 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;",[70],"76d3f671358e44511baa9186409663547ec2107daf771c82c399845f9af71dbd",["D",1747318612210],"legacyEnvVars","httpPrivacy","description","Minimal React Router + Hono starter example","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c6ac4b2d-2d7e-4ea8-c2bf-7e369bfdb600/square512?exp=1789581599&sig=9e5ee969e1f3f169f9bb1134febea6aa96085a2553280a81fc8dd8bfc2ca0d6d","userId","5e11e267-23cd-4ee4-86f4-3bf2a5ed69d7","pinnedFileId","ff04f441-158b-4566-8cdd-ef13c7c9a9e3","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_140":136},"org",{"_11":12,"_133":134,"_135":136,"_107":108,"_137":138,"_139":49},"branch","displayName","Brent Jackson","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789581599&sig=7742c69eefe5b3f3ad3a3f7e6edf592f3e3cdebc35c6bcc3dd8c9317dd6ea590","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":40,"_13":14,"_34":218,"_47":-5,"_101":49,"_50":51,"_102":51,"_103":104,"_105":106,"_107":108,"_109":110,"_111":26,"_112":26,"_113":-5,"_114":20,"_53":54,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_128":219,"_130":220,"_132":221,"_48":49},"tree",[203,204,205,206],"files",[203,204,205,206],"counts",{"_192":20,"_193":56,"_194":195,"_196":197,"_198":199},"contents",[166,167,168,169],"file","upstreamProject","upstreamBranch",{"_32":33,"_34":164,"_36":165,"_13":38,"_39":40,"_41":42,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":12,"_53":54,"_55":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747318612210],["D",1779898921971],{"_32":186,"_13":187,"_76":188,"_78":-5,"_79":57,"_80":173,"_81":26,"_34":189,"_41":20,"_84":152,"_86":190,"_64":49,"_88":-5,"_69":191},{"_32":180,"_13":181,"_76":182,"_78":-5,"_79":57,"_80":173,"_81":26,"_34":183,"_41":20,"_84":85,"_86":184,"_64":49,"_88":-5,"_69":185},{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":57,"_80":56,"_81":26,"_34":178,"_41":83,"_84":85,"_86":87,"_64":49,"_88":-5,"_69":179},{"_32":170,"_13":171,"_76":172,"_78":-5,"_79":57,"_80":173,"_81":26,"_34":174,"_41":20,"_84":175,"_86":176,"_64":49,"_88":-5,"_69":177},"beaf6754-3261-11f0-ab4c-569c3dd06744","server.tsx","c85ea5c7-1ed9-4e73-8e15-57b47b557cd3",1,["D",1747405584077],"http","/** @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\";\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;",[171],["D",1747405675921],[70],"beaf6286-3261-11f0-ab4c-569c3dd06744","client.tsx","3a331284-3d0c-4b80-8d79-c9e4dd2a8958",["D",1747405584077],"/** @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);",[181],"beaf4224-3261-11f0-ab4c-569c3dd06744","README.md","4c3d8c88-0851-486e-90a8-373588366e35",["D",1747405584077],"# React Router Hono Starter\n\nMinimal React Router + Hono 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 `server.tsx` file is the main server that responds with an HTML stream, using React Router, or an API response.\nThe HTML includes a `

Compare

Mergeserver-fetchintomain

routes.tsx+1-1