Why React Router?

React on its own doesn't know what a URL is. It can render a page, but it has no concept of /about vs /settings vs /app/notes/42. A router is the piece that connects URLs to pages — and React Router is the most widely used one in the React ecosystem.

More than a router

React Router started as a simple URL-to-component mapper, but it's grown into a full-stack framework. It now handles:

• Routing — mapping URLs to pages
• Layouts — shared structure (nav, footer) that persists across page changes
• Data loading — fetching what a page needs before it renders
• Server-side rendering — generating HTML on the server so pages load fast and work for search engines
• Form handling — submitting data to the server without writing API endpoints by hand

This means you don't need to glue together five separate libraries to build a real app. React Router handles the full stack in one cohesive package.

Why not Next.js?

Next.js (by Vercel) is the other dominant React framework. It's a solid choice with a massive ecosystem. So why didn't we use it?

Simplicity. React Router's model is straightforward: a URL hits a route, the route loads data and renders a component. Next.js introduces more concepts — server components, client components, "use client" directives, caching layers — that add power but also complexity that 99% of apps don't need.

Stability. React Router has been around since 2014 and has maintained a consistent API philosophy. Next.js has gone through major architectural shifts — Pages Router to App Router — leaving two coexisting paradigms, outdated tutorials, and migration overhead that make it harder to learn.

Portability. React Router apps deploy anywhere that runs Node.js. Next.js is tightly coupled to Vercel's infrastructure — deploying elsewhere requires reverse-engineering its build output. Community projects like OpenNext and Cloudflare's Vinext exist specifically to work around this, which tells you something about the problem.

File-based routing

In your project, you won't see a list of route definitions in a config file. Instead, your file structure is your routing:

app/routes/
├── home.tsx        → /
├── about.tsx       → /about
└── app/
    └── notes.tsx   → /app/notes

This is handled by react-router-auto-routes, which reads your file tree and generates routes automatically. Add a file, get a page — no wiring needed.