React Router Hono Starter

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

View demo

How it works

The server.tsx file is the main server that responds with an HTML stream, using React Router, or an API response. 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 route, 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