Guide · Open source
How to use react-router: install, set up routes and tips
Updated · written with AI from the project's own documentation and checked against our catalogue data
React Router is a routing library for React that decides which page or component to show based on the URL, and can load data for that page. This guide walks through how to start a project with it, how its three modes differ, and which packages you will meet. By the end you will know where to begin and whether it fits your app.
React Routerremix-run/react-router · ★ 56.6k · MIT Install options & downloads Quick start
- 1Check prerequisites. Make sure Node.js and npm, or another JavaScript package manager, are installed.
- 2Create a project. Run npx create-react-router@latest to generate a new framework project.
- 3Pick a mode. Decide between Framework, Data, and Declarative mode based on how much structure you want.
- 4Read the Getting Started docs. Follow the mode-specific installation guide at reactrouter.com for your chosen mode.
- 5Choose adapters if needed. If you deploy to Node.js, Express, Cloudflare or Architect, add the matching adapter package.
What you need before you install React Router
React Router is a React-specific library, so you need to be writing React code. The source lists Node.js and npm, or another JavaScript package manager, as the prerequisites.
If you are new to React, learn its basics first. React Router assumes you already understand components.
- Node.js
- npm or another JavaScript package manager
- Basic React knowledge
Create a new React Router project
The quickest way to start is the project creation tool. The README gives this command to create a new framework project. It uses the create-react-router package, which is listed as the project creation package for Framework mode.
npx create-react-router@latestChoose a mode: Framework, Data, or Declarative
React Router is a multi-strategy router. You can use it as a full framework with its own project setup, or as a smaller library that you wire into your own architecture. The README names three modes and the packages that belong to each.
Framework mode includes the full set of packages, such as the development tooling, adapters and file-system routes. Data and Declarative modes use the core react-router package. Check the Getting Started docs at reactrouter.com to pick the mode that suits your app.
- Framework: full framework with project setup and adapters
- Data: core library with data loading
- Declarative: core library for declarative routing
Know the packages in the React Router family
The project is split into several packages. The core package is react-router. Other packages cover tooling, server adapters and file-system routes.
File-system routes come from the @react-router/fs-routes package, which is useful if you want routes defined by your file layout.
- react-router: core, used in all three modes
- create-react-router: project creation
- @react-router/dev: development tooling
- @react-router/node: Node.js adapter
- @react-router/serve: web server
- @react-router/express: Express adapter
- @react-router/architect: Architect adapter
- @react-router/cloudflare: Cloudflare adapter
- @react-router/fs-routes: file-system routes
Deploy to a server or platform
The README lists adapters for Node.js, Express, Cloudflare and Architect. If you plan to deploy to one of these, check the matching adapter package in the table above.
What people use it for
- Building a single-page React app with URL-based page switching
- Starting a full framework project with its own setup
- Wiring a lightweight router into an existing React architecture
- Using file-system routes through @react-router/fs-routes
- Deploying a React app to Node.js, Express, Cloudflare or Architect
Frequently asked questions
How do I install react-router?
The README's command to start a new framework project is npx create-react-router@latest. For the lighter library, the README links to the installation guide for each mode at reactrouter.com.
Is react-router free to use?
React Router is released under the MIT licence, as stated in the project details. Check the LICENSE file in the repository for the full terms.
What do I need before using react-router?
You need Node.js and npm or another JavaScript package manager. You also need basic React knowledge, since React Router is a React-specific library.
What is the difference between Framework, Data, and Declarative mode?
Framework mode is a full framework with its own project setup and includes all packages. Data and Declarative modes use the core react-router package as a smaller library that fits your own architecture.
What are alternatives to react-router?
The project lists TanStack Router, Wouter and Next.js as comparable projects. Choose based on whether you want a router library or a full framework.
Does react-router work with Vue or Svelte?
No. React Router is for React, so projects that need Vue or Svelte should use a router for that framework.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
React Router suits React developers who want either a full framework or a lighter routing library, and who may deploy to Node.js, Express, Cloudflare or Architect. It is not a good fit for people without React experience or for projects built on Vue or Svelte, so consider TanStack Router, Wouter or Next.js if you want a different approach.
Install options & downloads