React Router Data Mode Starter

Minimal React Router starter example in "data mode" with server-side rendering for Val Town

View demo

How it works

The http.tsx file is the main server that responds with an HTML stream, using React Router. The HTML includes a <script type="module"> tag that loads the client.tsx file to hydrate the app with client-side routing provided by React Router in "data mode".

The routes are defined in routes and can include data loading and actions. The /about route includes a loader that fetches data from the api.tsx server, which returns a JSON response. The About page uses the useLoaderData hook to render the data from the loader in the page.

View more starters