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(`${BASE_URL}/api`)\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;",[105],"730d6569faeaa08df14998fc3df77062e9023535cb11a6d07c1cb4f45bf2cbb2","224116a6-326b-11f0-b071-569c3dd06744","9bfb0133-e2c8-42fb-a214-94d8dc039ec6",["D",1747409616598],9,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { useLoaderData, Link, Outlet } from \"https://esm.sh/react-router@7\";\n\n// provide the full URL so that both the client and server can fetch\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)}

\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;",[105],"124204645915c0a4c98fbdace23266c8b61ed2eced3f989a41444fc39876acfd",{"_72":124,"_74":-7,"_76":125},"config.ts",{"_32":126,"_13":124,"_79":127,"_81":-5,"_82":58,"_83":128,"_84":26,"_34":129,"_40":22,"_87":112,"_89":130,"_66":48,"_91":-5,"_92":-7,"_72":131,"_94":132},"f3a5c328-6109-11f0-b46c-0224a6c84d84","e3b8bc04-6109-11f0-ae93-0224a6c84d84",11,["D",1752535581873],"export const BASE_URL =\n \"https://nbbaier--df15d412239e4d3fa45686707d94f75b.web.val.run\";",[124],"d80100cfb4fbb0a5e14ce20541553c9a457bddff53cca5a55fc8e5fade6b66fd",["D",1752528013006],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_171":167},"org",{"_11":12,"_165":-5,"_166":167,"_138":139,"_168":169,"_170":48},"branch","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":253,"_46":-5,"_134":48,"_49":50,"_135":50,"_136":-5,"_137":-5,"_138":139,"_140":80,"_141":26,"_142":26,"_143":-5,"_144":145,"_53":146,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":152,"_153":152,"_154":155,"_156":155,"_157":155,"_158":152,"_159":152,"_160":254,"_162":255,"_164":256,"_47":48},"tree",[236,237,238,239,240],"files",[236,237,238,239,240],"counts",{"_226":145,"_227":216,"_228":145,"_229":230,"_231":232},"contents",[202,203,204,205,206],"file","upstreamProject",{"_32":39,"_13":56,"_136":198,"_137":199,"_49":50,"_160":200},"upstreamBranch",{"_32":33,"_34":196,"_36":197,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747318612210],["D",1779898921971],"Minimal React Router + Hono starter example","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c6ac4b2d-2d7e-4ea8-c2bf-7e369bfdb600/square512?exp=1789588799&sig=a00e0d03808c5e3db1fc68d7fc7721fdaf6b80f2484f18e1ec2eef92474c2e05",{"_11":52,"_171":201},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789588799&sig=f310120a808910a99a3db104d698a41ed953dd912ed7174c8373a978c6dd3167",{"_32":220,"_13":221,"_79":222,"_81":-5,"_82":58,"_83":216,"_84":26,"_34":223,"_40":145,"_87":183,"_89":224,"_66":48,"_91":-5,"_72":225},{"_32":213,"_13":214,"_79":215,"_81":-5,"_82":58,"_83":216,"_84":26,"_34":217,"_40":145,"_87":112,"_89":218,"_66":48,"_91":-5,"_72":219},{"_32":126,"_13":124,"_79":127,"_81":-5,"_82":58,"_83":128,"_84":26,"_34":211,"_40":22,"_87":112,"_89":130,"_66":48,"_91":-5,"_72":212},{"_32":108,"_13":105,"_79":109,"_81":-5,"_82":58,"_83":20,"_84":26,"_34":209,"_40":111,"_87":112,"_89":113,"_66":48,"_91":-5,"_72":210},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":58,"_83":57,"_84":26,"_34":207,"_40":86,"_87":88,"_89":90,"_66":48,"_91":-5,"_72":208},["D",1752535660520],[73],["D",1752535645715],[105],["D",1752535581873],[124],"544d09e6-60f8-11f0-ba4e-0224a6c84d84","client.tsx","a86c12c6-5e19-4cb0-9307-8352ee6967a6",1,["D",1752528013006],"/** @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);",[214],"544d002c-60f8-11f0-ba4e-0224a6c84d84","README.md","4fee8687-9203-40ea-8a65-1a82f78fe6a7",["D",1752528013006],"# 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

Mergenbbaier/mainintojxnblk/main

routes.tsx+36-36

Hserver.tsx+7-7

config.ts+2-0