{data.message}

;\n}",[],[157,184],{"_102":191,"_95":192,"_158":193,"_160":159,"_161":139,"_162":163,"_164":116,"_104":194,"_99":32,"_166":178,"_168":195,"_169":22,"_170":-5,"_171":196,"_98":197},"4d953d36-e401-11ef-96b8-e6cdfca9ef9f","home.tsx","5dc8c8b7-0c8a-4250-a20f-a32e7700148b",["D",1738787971920],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function Home() {\n return

Home

;\n}",[],[157,192],{"_102":199,"_95":200,"_158":201,"_160":159,"_161":139,"_162":163,"_164":116,"_104":202,"_99":32,"_166":178,"_168":203,"_169":22,"_170":-5,"_171":204,"_98":205},"4d955686-e401-11ef-96b8-e6cdfca9ef9f","index.ts","d5821445-594c-488b-a357-89b5d6aa7828",["D",1738787971920],"import {\n ActionFunctionArgs,\n LoaderFunctionArgs,\n} from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport aboutLoader from \"./about.loader.ts\";\nimport About from \"./about.tsx\";\nimport Home from \"./home.tsx\";\nimport Layout from \"./layout.tsx\";\n\nlet isServer = typeof document === \"undefined\";\n\nexport default [\n {\n id: \"layout\",\n path: \"/\",\n Component: Layout,\n // up to you where your loaders run (client or server), this one dynamically\n // imports the correct one to avoid putting the server code in client\n // bundles\n async loader(args: LoaderFunctionArgs) {\n let mod = await (isServer\n ? import(\"./layout.server.ts\")\n : import(\"./layout.client.ts\"));\n return mod.loader(args);\n },\n // same with the action, you'll probably want to abstract this kind of stuff\n // in a createRoute() kind of thing\n async action(args: ActionFunctionArgs) {\n let mod = await (isServer\n ? import(\"./layout.server.ts\")\n : import(\"./layout.client.ts\"));\n return mod.action(args);\n },\n children: [\n {\n id: \"home\",\n index: true,\n Component: Home,\n },\n {\n id: \"about\",\n path: \"about\",\n Component: About,\n // this loader runs in both places\n loader: aboutLoader,\n },\n ],\n },\n];",[],[157,200],{"_102":207,"_95":208,"_158":209,"_160":159,"_161":139,"_162":163,"_164":116,"_104":210,"_99":32,"_166":178,"_168":211,"_169":22,"_170":-5,"_171":212,"_98":213},"4d9559c4-e401-11ef-96b8-e6cdfca9ef9f","layout.client.ts","dc927a5e-9b5f-49a5-9ed9-e92164a4cc44",["D",1738787971920],"import { type LoaderFunctionArgs } from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n let url = new URL(request.url);\n let res = await fetch(url, {\n headers: {\n Accept: \"application/json\",\n \"X-Route-Id\": \"layout\",\n },\n });\n return res.json();\n}\n\nexport async function action({ request }: LoaderFunctionArgs) {\n let url = new URL(request.url);\n // call the server action\n let res = await fetch(url, {\n method: \"POST\",\n body: new URLSearchParams(await request.formData()),\n headers: {\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n Accept: \"application/json\",\n \"X-Route-Id\": \"layout\",\n },\n });\n return res.json();\n}",[],[157,208],{"_102":215,"_95":216,"_158":217,"_160":159,"_161":139,"_162":163,"_164":116,"_104":218,"_99":32,"_166":178,"_168":219,"_169":22,"_170":-5,"_171":220,"_98":221},"4d955b54-e401-11ef-96b8-e6cdfca9ef9f","layout.server.ts","edd5d7fe-c333-4bdb-b8b6-fa3acfe2cbf6",["D",1738787971920],"import {\n ActionFunctionArgs,\n type LoaderFunctionArgs,\n} from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\n\nlet db = { message: \"Hello world!\" };\n\nexport async function loader(args: LoaderFunctionArgs) {\n await new Promise(resolve => setTimeout(resolve, 200));\n return { message: db.message };\n}\n\nexport async function action({ request }: ActionFunctionArgs) {\n let formData = await request.formData();\n db.message = String(formData.get(\"message\"));\n return { ok: true };\n}",[],[157,216],{"_102":223,"_95":224,"_158":225,"_160":159,"_161":139,"_162":163,"_164":116,"_104":226,"_99":32,"_166":178,"_168":227,"_169":22,"_170":-5,"_171":228,"_98":229},"4d955e42-e401-11ef-96b8-e6cdfca9ef9f","layout.tsx","9af0219c-db96-4064-851d-ba74b520ece8",["D",1738787971920],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Form,\n Link,\n Outlet,\n useLoaderData,\n} from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport { type loader } from \"./layout.server.ts\";\n\nexport default function Layout() {\n let data = useLoaderData();\n return (\n \n \n React Router Custom Framework\n \n \n

React Router Custom Framework

\n\n \n\n

\n Home | About\n

\n\n

\n\n \n

\n\n \n \n \n );\n}",[],[157,224],[157],{"_102":232,"_95":233,"_158":234,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":235,"_99":32,"_166":236,"_168":237,"_169":22,"_170":-5,"_171":238,"_98":239},"4d956126-e401-11ef-96b8-e6cdfca9ef9f","README.md","d004ebee-9ae8-412b-98a1-4877f9366327",["D",1738787971920],"file","# React Router v7\n\nThis project demonstrates how to use react-router v7's [custom framework setup](https://reactrouter.com/start/framework/custom) to run react-router in a val.town project.\n\nThis is a direct port of [their example repo](https://github.com/remix-run/custom-react-router-framework-example).",[],[233],{"_102":241,"_95":242,"_158":243,"_160":-5,"_161":139,"_162":138,"_164":116,"_104":244,"_99":163,"_166":178,"_168":245,"_169":22,"_170":-5,"_171":246,"_98":247},"b6c3c0a6-e4ac-11ef-8b30-e6cdfca9ef9f","entry.client.tsx","6cf4c530-33ac-4014-b5af-f37e7cad2368",["D",1738861592350],"import { hydrateRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { RouterProvider } from \"https://esm.sh/react-router@7.1.3/dom?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createBrowserRouter } from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport { StrictMode } from \"https://esm.sh/react@18.2.0\";\nimport routes from \"./routes/index.ts\";\n\nlet router = createBrowserRouter(routes, {\n // @ts-expect-error It's fine\n hydrationData: window.__staticRouterHydrationData,\n});\n\nhydrateRoot(document, React.createElement(RouterProvider, { router: router }));\n\nconsole.log(\"ladededa testing pull requests\");",[],[242],{"_102":249,"_95":250,"_158":251,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":252,"_99":32,"_166":178,"_168":253,"_169":22,"_170":-5,"_171":254,"_98":255},"4d956446-e401-11ef-96b8-e6cdfca9ef9f","entry.server.tsx","b4e33041-bba9-4aa0-9c6a-b7f93e7366de",["D",1738787971920],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport {\n createStaticHandler,\n createStaticRouter,\n StaticRouterProvider,\n} from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\n\nimport routes from \"./routes/index.ts\";\n\nlet { query, dataRoutes } = createStaticHandler(routes);\n\nexport async function handler(request: Request) {\n // 1. run actions/loaders to get the routing context with `query`\n let context = await query(request);\n\n // If `query` returns a Response, send it raw (a route probably a redirected)\n if (context instanceof Response) {\n return context;\n }\n\n // 2. Create a static router for SSR\n let router = createStaticRouter(dataRoutes, context);\n\n // 3. Render everything with StaticRouterProvider\n let html = renderToString(\n ,\n );\n\n // Setup headers from action and loaders from deepest match\n let leaf = context.matches[context.matches.length - 1];\n let actionHeaders = context.actionHeaders[leaf.route.id];\n let loaderHeaders = context.loaderHeaders[leaf.route.id];\n let headers = new Headers(actionHeaders);\n if (loaderHeaders) {\n for (let [key, value] of loaderHeaders.entries()) {\n headers.append(key, value);\n }\n }\n\n headers.set(\"Content-Type\", \"text/html; charset=utf-8\");\n\n // 4. send a response\n return new Response(`${html}`, {\n status: context.statusCode,\n headers,\n });\n}",[],[250],{"_102":257,"_95":258,"_158":114,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":259,"_99":32,"_166":260,"_168":261,"_169":22,"_170":-5,"_171":262,"_98":263},"4d958890-e401-11ef-96b8-e6cdfca9ef9f","server.tsx",["D",1738787971920],"http","import { handler } from \"./entry.server.tsx\";\n\nexport default async function(request: Request) {\n const url = new URL(request.url);\n if (url.pathname == \"/js/entry.client.js\") {\n const moduleUrl = new URL(\"./entry.client.tsx\", import.meta.url);\n return fetch(moduleUrl);\n }\n return handler(request);\n}",[],[258],"files",[155,173,182,190,198,206,214,222,231,240,248,256],"counts",{"_268":32,"_269":163,"_270":32,"_271":272},"pulls","branches","forks","envVars",{"_273":32,"_274":32},"count","emptyCount","contents",[277,280,283,286,289],{"_102":156,"_95":157,"_158":159,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":278,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":279},["D",1738787971920],[157],{"_102":232,"_95":233,"_158":234,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":281,"_99":32,"_166":236,"_168":237,"_169":22,"_170":-5,"_98":282},["D",1738787971920],[233],{"_102":241,"_95":242,"_158":243,"_160":-5,"_161":139,"_162":138,"_164":116,"_104":284,"_99":163,"_166":178,"_168":245,"_169":22,"_170":-5,"_98":285},["D",1738861592350],[242],{"_102":249,"_95":250,"_158":251,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":287,"_99":32,"_166":178,"_168":253,"_169":22,"_170":-5,"_98":288},["D",1738787971920],[250],{"_102":257,"_95":258,"_158":114,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":290,"_99":32,"_166":260,"_168":261,"_169":22,"_170":-5,"_98":291},["D",1738787971920],[258],"upstreamProject",{"_102":147,"_95":96,"_110":294,"_111":-5,"_108":109,"_23":295},"React router v7 running in a val.town project",{"_93":296,"_131":297},"justbe","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2F2YXRhcnMuZ2l0aHVidXNlcmNvbnRlbnQuY29tL3UvMzA4NzIyNT92PTQiLCJzIjoiODRqbjJSZG5jOWkyNUgrUXJIU0dRUWZnQmRrQ01LY2NxUTBUMm5nTEVQOCJ9","upstreamBranch",{"_102":142,"_104":300,"_301":302,"_95":43,"_140":147,"_99":303,"_141":-5,"_143":-5,"_304":305,"_106":-5,"_152":22,"_108":109,"_151":296,"_16":149,"_150":96},["D",1737749593947],"updatedAt",["D",1739569255443],47,"lockfileKey","1765531798716-esm.town_v_justbe_reactRouter7@47-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":312,"_275":317,"_328":329,"_332":333,"_336":-5,"_264":337,"_374":371,"_375":32,"_376":32,"_377":22,"_378":22},{"_102":103,"_95":96,"_104":313,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":116,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":314,"_133":315,"_136":316,"_152":22},["D",1738787971920],{"_93":94,"_131":132},{"_93":94,"_135":132,"_14":112},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":142,"_143":144,"_145":109,"_146":147,"_148":149,"_150":96,"_151":94},[318,320,322,324,326],{"_102":156,"_95":157,"_158":159,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":278,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":319},[157],{"_102":232,"_95":233,"_158":234,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":281,"_99":32,"_166":236,"_168":237,"_169":22,"_170":-5,"_98":321},[233],{"_102":241,"_95":242,"_158":243,"_160":-5,"_161":139,"_162":138,"_164":116,"_104":284,"_99":163,"_166":178,"_168":245,"_169":22,"_170":-5,"_98":323},[242],{"_102":249,"_95":250,"_158":251,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":287,"_99":32,"_166":178,"_168":253,"_169":22,"_170":-5,"_98":325},[250],{"_102":257,"_95":258,"_158":114,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":290,"_99":32,"_166":260,"_168":261,"_169":22,"_170":-5,"_98":327},[258],"readme",{"_102":232,"_95":233,"_158":234,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":330,"_99":32,"_166":236,"_168":237,"_169":22,"_170":-5,"_98":331},["D",1738787971920],[233],"upstream",{"_102":142,"_104":334,"_301":335,"_95":43,"_140":147,"_99":303,"_141":-5,"_143":-5,"_304":305,"_106":-5,"_152":22,"_108":109,"_151":296,"_16":149,"_150":96},["D",1737749593947],["D",1739569255443],"pull",[338,340,343,346,349,352,355,358,362,365,368,371],{"_102":156,"_95":157,"_158":159,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":165,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":339,"_98":361},[340,343,346,349,352,355,358],{"_102":174,"_95":175,"_158":176,"_160":159,"_161":139,"_162":163,"_164":116,"_104":177,"_99":32,"_166":178,"_168":179,"_169":22,"_170":-5,"_171":341,"_98":342},[],[157,175],{"_102":183,"_95":184,"_158":185,"_160":159,"_161":139,"_162":163,"_164":116,"_104":186,"_99":32,"_166":178,"_168":187,"_169":22,"_170":-5,"_171":344,"_98":345},[],[157,184],{"_102":191,"_95":192,"_158":193,"_160":159,"_161":139,"_162":163,"_164":116,"_104":194,"_99":32,"_166":178,"_168":195,"_169":22,"_170":-5,"_171":347,"_98":348},[],[157,192],{"_102":199,"_95":200,"_158":201,"_160":159,"_161":139,"_162":163,"_164":116,"_104":202,"_99":32,"_166":178,"_168":203,"_169":22,"_170":-5,"_171":350,"_98":351},[],[157,200],{"_102":207,"_95":208,"_158":209,"_160":159,"_161":139,"_162":163,"_164":116,"_104":210,"_99":32,"_166":178,"_168":211,"_169":22,"_170":-5,"_171":353,"_98":354},[],[157,208],{"_102":215,"_95":216,"_158":217,"_160":159,"_161":139,"_162":163,"_164":116,"_104":218,"_99":32,"_166":178,"_168":219,"_169":22,"_170":-5,"_171":356,"_98":357},[],[157,216],{"_102":223,"_95":224,"_158":225,"_160":159,"_161":139,"_162":163,"_164":116,"_104":226,"_99":32,"_166":178,"_168":227,"_169":22,"_170":-5,"_171":359,"_98":360},[],[157,224],[157],{"_102":232,"_95":233,"_158":234,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":235,"_99":32,"_166":236,"_168":237,"_169":22,"_170":-5,"_171":363,"_98":364},[],[233],{"_102":241,"_95":242,"_158":243,"_160":-5,"_161":139,"_162":138,"_164":116,"_104":244,"_99":163,"_166":178,"_168":245,"_169":22,"_170":-5,"_171":366,"_98":367},[],[242],{"_102":249,"_95":250,"_158":251,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":252,"_99":32,"_166":178,"_168":253,"_169":22,"_170":-5,"_171":369,"_98":370},[],[250],{"_102":257,"_95":258,"_158":114,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":259,"_99":32,"_166":260,"_168":261,"_169":22,"_170":-5,"_171":372,"_98":373},[],[258],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

charmaine

reactRouter7

React Router v7