1/** @jsxImportSource https://esm.sh/react@18.2.0 **/
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3
4export default (req: Request) => {
1# React Router v7
2
3This 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.
4
5This is a direct port of [their example repo](https://github.com/remix-run/custom-react-router-framework-example).
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import {
3 Form,
5 Outlet,
6 useLoaderData,
7} from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
8import { type loader } from "./layout.server.ts";
9
13 <html>
14 <head>
15 <title>React Router Custom Framework</title>
16 </head>
17 <body>
18 <div>
19 <h1>React Router Custom Framework</h1>
20
21 <Form method="post">
2 ActionFunctionArgs,
3 type LoaderFunctionArgs,
4} from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
5
6let db = { message: "Hello world!" };
1import { type LoaderFunctionArgs } from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
2
3export async function loader({ request }: LoaderFunctionArgs) {
2 ActionFunctionArgs,
3 LoaderFunctionArgs,
4} from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
5import aboutLoader from "./about.loader.ts";
6import About from "./about.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export default function Home() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3import {
4 createStaticHandler,
5 createStaticRouter,
6 StaticRouterProvider,
7} from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
8
9import routes from "./routes/index.ts";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import { useLoaderData } from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
4import type loader from "./about.loader.js";
5
1import { data } from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
2
3export default async function load() {
Starter template with client-side React & Hono server
Starter template with client-side React & Hono server
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
