React Router 7 Demo

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_237":238,"_239":240},"routes/_app.x.$handle.$name",{"_106":105,"_32":51,"_114":92,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_21":-5,"_126":127,"_128":129,"_130":25,"_131":132,"_133":25,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_49":50,"_32":51,"_38":52,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":-5,"_59":-5,"_18":60,"_61":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",15,"changes",[19,20],"aiChatInfo","userId",{"_21":43,"_23":-7,"_24":25,"_26":25,"_27":44,"_29":44},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous","deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","c74a4f96-13cb-11f0-8f99-569c3dd06744","name","App.tsx","fileType","script","content","// @jsxImportSource https://esm.sh/react@18.2.0\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { \n createBrowserRouter, \n RouterProvider, \n Outlet,\n Link\n} from \"https://esm.sh/react-router-dom@7.0.0?deps=react@18.2.0\";\n\n// Page components\nimport HomePage from \"./pages/HomePage.tsx\";\nimport AboutPage from \"./pages/AboutPage.tsx\";\nimport UserProfilePage from \"./pages/UserProfilePage.tsx\";\nimport NotFoundPage from \"./pages/NotFoundPage.tsx\";\n\n// Layout component with navigation\nconst Layout = () => {\n return (\n

\n \n

\n \n \n

\n );\n};\n\n// Create router with React Router 7\nconst router = createBrowserRouter([\n {\n path: \"/\",\n element: ,\n children: [\n {\n index: true,\n element: \n },\n {\n path: \"about\",\n element: \n },\n {\n path: \"users/:userId\",\n element: \n },\n {\n path: \"*\",\n element: \n }\n ]\n }\n]);\n\n// Main App component\nconst App = () => {\n return ;\n};\n\nexport default App;","createdAt",["D",1744042639123],"branchVersion","branchId","982d7294-13c9-11f0-b2a1-569c3dd06744",{"_30":45,"_32":46,"_34":47,"_36":-5,"_38":48,"_40":14,"_41":42,"_24":25},"frontend/components","26a9846f-8db8-4c6e-917e-fc5fd080f0e7","components","directory",["D",1744042639123],"id","982a325a-13c9-11f0-b2a1-569c3dd06744","reactHonoStarter",["D",1744041701063],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","b7c779fe-13cb-11f0-92c8-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion",25,"likeCount",0,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_18":60,"_110":111,"_112":25},"branch",{"_13":67,"_32":92,"_49":42,"_93":50,"_94":95,"_96":97,"_98":56,"_99":100,"_101":102,"_103":51,"_104":105},"isOwned","main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",39,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","loading","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_32":51,"_38":233,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":-5,"_59":-5,"_18":60,"_61":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":234,"_87":235,"_89":236,"_91":25},"tree",[186,188,193],"files",[186,187,188,189,190,191,192,193],"counts",{"_175":69,"_176":177,"_178":69,"_179":180,"_181":182},"contents",[150,151,152],"upstreamProject",{"_49":100,"_32":145,"_58":146,"_59":147,"_55":56,"_85":148},"upstreamBranch",{"_49":95,"_38":138,"_139":140,"_32":92,"_93":100,"_13":141,"_94":-5,"_96":-5,"_142":143,"_53":-5,"_91":25,"_55":56,"_104":144,"_70":102,"_103":145},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789595999&sig=18aeddca3c1af95e36337c6aea2eb1cd1f097b3d06250b7665ca0274d3dfffd8",{"_106":144,"_113":149},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789595999&sig=5ce53d553f31a4c291a4ca5660b7f712b9aba9a0d43f432f1aaacd8970ef293d",{"_49":169,"_32":170,"_30":171,"_156":-5,"_41":42,"_40":172,"_158":64,"_38":173,"_13":69,"_34":47,"_36":-5,"_24":25,"_161":-5,"_27":174},{"_49":163,"_32":164,"_30":165,"_156":-5,"_41":42,"_40":166,"_158":64,"_38":167,"_13":69,"_34":47,"_36":-5,"_24":25,"_161":-5,"_27":168},{"_49":153,"_32":154,"_30":155,"_156":-5,"_41":42,"_40":157,"_158":64,"_38":159,"_13":69,"_34":21,"_36":160,"_24":25,"_161":-5,"_27":162},"b3cb9574-13cb-11f0-9ac2-569c3dd06744","README.md","b3cb9614-13cb-11f0-9ac2-569c3dd06744","parentId",11,"latest",["D",1744042606418],"# React Router 7 Demo\n\nA basic project demonstrating React Router 7 implementation on Val Town.\n\n## Project Structure\n\n- `/backend` - Hono server to serve the frontend\n- `/frontend` - React application with React Router 7\n- `/shared` - Shared utilities and types\n\n## Features\n\n- React 18.2.0\n- React Router 7\n- Tailwind CSS for styling\n- Responsive layout\n- Multiple page routes\n\n## Usage\n\nThis project demonstrates basic routing with React Router 7, including:\n- Home page\n- About page\n- User profiles\n- Not found (404) page","label",[154],"bbdaab6a-13cb-11f0-92c8-569c3dd06744","frontend","e287ee22-81a6-4cd4-9632-3a778e012e37",13,["D",1744042619926],[164],"b7c7807a-13cb-11f0-92c8-569c3dd06744","backend","eda9feba-9711-4fd0-a346-f9532eb02ffc",12,["D",1744042613101],[170],"pulls","branches",1,"forks","envVars",{"_183":69,"_185":69},"connections",{"_183":69,"_184":69},"count","unfilledCount","emptyCount",{"_49":169,"_32":170,"_30":171,"_156":-5,"_41":42,"_40":172,"_158":64,"_38":230,"_13":69,"_34":47,"_36":-5,"_24":25,"_161":-5,"_195":231,"_27":232},{"_49":224,"_32":225,"_30":62,"_156":171,"_41":42,"_40":172,"_158":25,"_38":226,"_13":69,"_34":35,"_36":227,"_24":25,"_161":-5,"_195":228,"_27":229},{"_49":163,"_32":164,"_30":165,"_156":-5,"_41":42,"_40":166,"_158":64,"_38":221,"_13":69,"_34":47,"_36":-5,"_24":25,"_161":-5,"_195":222,"_27":223},{"_49":217,"_32":46,"_30":45,"_156":165,"_41":42,"_40":14,"_158":64,"_38":218,"_13":69,"_34":47,"_36":-5,"_24":25,"_161":-5,"_195":219,"_27":220},{"_49":213,"_32":33,"_30":31,"_156":45,"_41":42,"_40":14,"_158":64,"_38":214,"_13":69,"_34":35,"_36":37,"_24":25,"_161":-5,"_195":215,"_27":216},{"_49":206,"_32":207,"_30":208,"_156":165,"_41":42,"_40":166,"_158":64,"_38":209,"_13":69,"_34":21,"_36":210,"_24":25,"_161":-5,"_195":211,"_27":212},{"_49":198,"_32":199,"_30":200,"_156":165,"_41":42,"_40":201,"_158":64,"_38":202,"_13":69,"_34":35,"_36":203,"_24":25,"_161":-5,"_195":204,"_27":205},{"_49":153,"_32":154,"_30":155,"_156":-5,"_41":42,"_40":157,"_158":64,"_38":194,"_13":69,"_34":21,"_36":160,"_24":25,"_161":-5,"_195":196,"_27":197},["D",1744042606418],"children",[],[154],"be5930aa-13cb-11f0-afbe-569c3dd06744","index.tsx","be59319a-13cb-11f0-afbe-569c3dd06744",14,["D",1744042624122],"// @jsxImportSource https://esm.sh/react@18.2.0\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst rootElement = document.getElementById(\"root\");\nif (!rootElement) throw new Error(\"Root element not found\");\n\nconst root = createRoot(rootElement);\nroot.render(\n \n \n \n);",[],[164,199],"bbdaa5d4-13cb-11f0-92c8-569c3dd06744","index.html","bbdaa674-13cb-11f0-92c8-569c3dd06744",["D",1744042619926],"\n\n\n \n \n React Router 7 Demo\n \n \n \n \n\n\n

\n \n \n

\n View Source\n \n

\n\n",[],[164,207],"c74a4eba-13cb-11f0-8f99-569c3dd06744",["D",1744042639123],[],[164,46,33],"c74a8cae-13cb-11f0-8f99-569c3dd06744",["D",1744042639123],[190],[164,46],["D",1744042619926],[189,191,192],[164],"b7c77936-13cb-11f0-92c8-569c3dd06744","index.ts",["D",1744042613101],"import { Hono } from \"https://esm.sh/hono@3.12.0\";\nimport { serveStatic } from \"https://esm.sh/hono@3.12.0/middleware.ts\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@71-main/index.ts\";\n\nconst app = new Hono();\n\n// Serve static assets\napp.get(\"/assets/*\", c => serveFile(c.req.path.replace(\"/assets\", \"/frontend\"), import.meta.url));\n\n// Serve the frontend for all routes to support client-side routing\napp.get(\"*\", async c => {\n try {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n } catch (error) {\n console.error(\"Error serving index.html:\", error);\n return c.text(\"Server error\", 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[170,225],["D",1744042613101],[187],[170],["D",1744041701063],{"_106":105,"_113":109},{"_106":105,"_107":-5,"_108":109,"_18":60,"_110":111,"_112":25},{"_13":67,"_32":92,"_49":42,"_93":50,"_94":95,"_96":97,"_98":56,"_99":100,"_101":102,"_103":51,"_104":105},"ctx",{"_85":-5,"_135":270,"_271":272,"_273":274,"_275":25,"_276":25,"_277":25,"_278":64,"_279":-5,"_280":-7,"_281":-7,"_282":69,"_283":25,"_284":25,"_285":-5,"_286":25,"_287":25,"_288":25,"_289":-5},"ENV",{"_241":242,"_243":244,"_245":92,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v15