What framework mode is
React Router 7 can be used in two main ways. In library mode it only switches screens in the browser — that is how the React course uses it. In framework mode it becomes a full-stack framework: it builds the project, renders pages on the server, loads data and handles forms. This course is about framework mode. React basics (components, props, hooks) are assumed.
Where it came from
The full-stack features used to live in a separate framework, Remix, made by the same team. Remix 2 was built on top of React Router, and in version 7 the two were merged: everything Remix could do is now part of React Router. If you find an article about Remix 2, almost all of it applies here — only the package names change (@remix-run/... became react-router and @react-router/...).
Three modes
| Mode | How you set it up | What you get |
|---|---|---|
| Declarative | BrowserRouter and Routes | Routes in the browser only |
| Data | createBrowserRouter | Plus loaders and actions in the browser |
| Framework | The create-react-router template and a Vite plugin | Plus a server, SSR, build, types |
All modes share the same Link, NavLink, Outlet components and hooks like useNavigate. The difference is who runs the app: you or the framework.
What framework mode does
- Routes are listed in
app/routes.ts, and each page is a file — a route module. - A
loaderfunction loads data on the server before the page renders. - An
actionfunction receives a submitted form. - The page is rendered on the server first, so users and search engines get ready HTML right away.
- Types for params and data are generated automatically.
The path of a request
- The browser requests an address, for example
/posts/1. - React Router finds the matching route in
app/routes.ts. - The route's
loaderruns — it gets the post from the database. - The route component receives the data and is rendered to HTML.
- The browser shows the page, then React "hydrates" it, and further navigation happens without reloads.
Versions
The course targets React Router 7, React 19 and TypeScript. You need Node.js 20 or newer. The running example is a blog: a list of posts, a post page, a form to add a post and comments.
Common mistake
Beginners mix the modes: they create a project with create-react-router and then, out of habit, wrap the app in BrowserRouter and write Routes. In framework mode you do not do this — the framework creates the router itself, and routes are defined only in app/routes.ts.