ScriptsMay 1, 2026·3 min read

React Router — Declarative Client-Side Routing for React

The standard routing library for React. Define URL-based navigation with nested routes, data loaders, and code splitting out of the box.

Script Depot
Script Depot · Community

Introduction

React Router is the most widely adopted routing solution in the React ecosystem. It lets you map URLs to components, handle nested layouts, and load data before rendering — all with a declarative API that mirrors React's component model.

What React Router Does

  • Maps URL paths to React components with a nested route tree
  • Supports data loaders and actions for fetch-before-render patterns
  • Provides client-side navigation without full page reloads
  • Handles route-level code splitting via lazy loading
  • Offers both browser-based and memory-based routers for different environments

Architecture Overview

React Router uses a route tree that the framework matches against the current URL. Each matched route can define a loader (data fetching), an action (mutations), and an element (UI). The router context propagates location state through React context, and navigation is intercepted at the link level so the browser never performs a hard reload.

Self-Hosting & Configuration

  • Install via npm, yarn, or pnpm — no server dependency required
  • Configure a catch-all rule on your web server so all paths serve index.html
  • Use createBrowserRouter for history-based routing or createHashRouter for hash-based
  • Define route-level loader and action functions for data coupling
  • Enable route-based code splitting with React.lazy and dynamic imports

Key Features

  • Nested routing with layout routes and outlet components
  • Built-in data loading and mutation API (loaders and actions)
  • Type-safe route references when used with TypeScript
  • Relative links and automatic active-link styling
  • Supports both SPA and framework (Remix-style) modes

Comparison with Similar Tools

  • Next.js App Router — file-system routing tightly coupled to Next.js; React Router is framework-agnostic
  • TanStack Router — type-safe with search-param validation; React Router has a larger ecosystem
  • Wouter — minimal ~2 KB router for simple apps; React Router covers complex nested layouts
  • Reach Router — predecessor merged into React Router v6

FAQ

Q: Which version should I use? A: Use the latest v7 release. It unifies the classic SPA router with the Remix framework model.

Q: Does React Router work with React Server Components? A: The framework mode supports server rendering and streaming. The SPA mode runs entirely on the client.

Q: Can I use it outside of React? A: The core matching logic is framework-agnostic, but the component API targets React.

Q: Is React Router free? A: Yes, it is MIT-licensed and fully open source.

Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

StyleTTS 2 — Human-Level Text-to-Speech via Style Diffusion

A TTS system that achieves human-level speech synthesis through style diffusion and adversarial training with large speech language models. Fast inference with natural prosody.

Script Depot

PowerInfer — High-Speed Local LLM Inference via Activation Locality

A CPU/GPU LLM inference engine that exploits activation locality to achieve high-speed generation on consumer hardware. Runs large models efficiently by only computing activated neurons.

Script Depot

CogVideo — Text and Image to Video Generation

An open-source video generation framework from Zhipu AI supporting text-to-video and image-to-video with CogVideoX models. Generates high-quality clips up to 6 seconds.

Script Depot
◈Home🔍Search👤Me