Contents
React Router
React Router 7 in framework mode (formerly Remix): routes, loaders, actions and server rendering.
1.Getting started
- What framework mode isReact Router 7 as a full-stack framework: how it differs from library mode and how it relates to Remix.
- Creating a projectCreating an app with create-react-router, running the dev server and a tour of the folders.
- Routes and route modulesThe app/routes.ts file, the route and index functions, route modules and generated types.
- Layouts and nested routesA shared header for several pages: layout, Outlet, nested and index routes, prefix.
- Links and navigationMoving between pages without reloads: Link, NavLink, prefetching and useNavigate.
- Dynamic segments and paramsOne route for many addresses: colon segments, params, optional segments and the splat.
2.Data and forms
- Loaders: data from the serverThe loader function loads data on the server before the page renders, and the component gets it as loaderData.
- clientLoader: loading in the browserWhen data has to come from the browser: clientLoader, HydrateFallback and calling serverLoader.
- Actions and formsThe action function receives a submitted form on the server, and the Form component submits it without a reload.
- Form validation and errorsChecking data in an action, returning errors with data() and showing them in the form via actionData.
- Pending and optimistic UIThe useNavigation hook: a loading indicator, disabling the button while submitting and showing the result before the server answers.
- useFetcher: forms without navigationPost comments with fetcher.Form: submitting without changing the address, a separate state and optimistic output.
- Error boundariesThe ErrorBoundary export of a route module: the 404 page, expected and unexpected errors.
- Meta and links: SEOThe meta and links exports of a route module: the tab title, description, social tags and linked files.
3.Server
- A databaseStoring posts and comments in SQLite with the better-sqlite3 package instead of an in-memory array.
- Sessions and cookiescreateCookieSessionStorage: keeping data between requests, reading and writing the session, flash messages.
- Logging in and outSession-based authentication: a login form, storing userId in the session, logging out and protecting loaders and actions.
- Resource routes: JSON and filesA route without a component returns a response instead of a page: JSON for an API, a CSV file, RSS.
- Environment variablesThe .env file, process.env in server code, VITE_ variables for the browser and passing values through a loader.
4.Going to production
- Rendering strategies: SSR, SPA and prerenderingThe react-router.config.ts file: server rendering, SPA mode without a server and pages generated in advance.
- Styles and static filesThe global app.css, Tailwind CSS from the template, per-route styles with links, CSS modules, images and the public folder.
- Testing basicsVitest for loaders and actions as plain functions and createRoutesStub for testing route components.
- Building and deployingThe react-router build command, running with react-router-serve, Docker from the template and an overview of adapters for different platforms.