Skip to content

React Router

React Router connects addresses to screens in a React app. Its Framework mode also gives you a place to load records and handle form submissions on the server.

Visit React Router

When do you need Framework mode?

Start with the job your app needs. Declarative mode can choose a screen when the address changes. Data mode adds ways to load data and handle changes with your own setup. Framework mode also gives the app a build and server structure.

For an appointment screen that needs current availability and a server-side save, use the Framework mode examples. The version and mode tell you which examples fit your app.

Where does a Framework mode form save a change?

A route can load existing records and provide a server action to receive changes. Your action checks the request and saves it to a database you connect.

React Router can show that a form is waiting and ordinarily refreshes the route data after an action. The action still needs to report whether the booking was saved. A pending spinner or a refreshed page is not proof of a successful write.

How can you sketch a save and a rejected change?

On paper, give a fictional customer two repair times and draw what they see before, during and after a save. No app or service is needed.

  1. Start at the booking address
    Draw the screen with 2:00 and 3:30. Show where the route reads the two times.
  2. Mark the request as pending
    Have the visitor choose 2:00. Draw a waiting state before the server answers. Once the paper database accepts the booking, show the confirmation and the new availability.
  3. Open the address again
    Read the records anew. The saved booking should still be present. If a second visitor submits the already-taken time, leave the record alone and show a useful error.

What needs to run when you deploy it?

A booking form handled by a server action needs a compatible runtime and a persistent database. React Router also supports static hosting for configurations that serve browser files and use a separate service when needed.

For a Node deployment, the current v8 package requires Node 22.22 or newer. Match the project’s React and Vite versions to its framework setup. React Router is MIT-licensed. The host and database have separate costs.

Keep the source, dependencies and route map. Move customer records through your database’s own backup and restore process, then verify both old page addresses and saved records at the destination.

How does React Router relate to Remix?

React Router v7 Framework mode is the documented upgrade path from the old React-based Remix v2. The separate Remix 3 framework uses its own screen components.

The project ended Remix v2 security updates with the React Router v8 release. If you inherit Remix v2, check the documented upgrade to v7 first. React Router v8 has its own prerequisites and upgrade steps.