Convert Figma logo to code with AI

remix-run logoreact-router

Declarative routing for React

52,761
10,208
52,761
109

Top Related Projects

124,777

The React Framework

29,083

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

6,901

6,590

🥢 A minimalist-friendly ~2.1KB routing for React and Preact

Declarative routing for React

Quick Overview

React Router is a popular routing library for React applications. It enables the creation of single-page applications with dynamic, client-side routing, allowing developers to define routes and navigate between different components without full page reloads.

Pros

  • Declarative routing with easy-to-understand syntax
  • Nested routing support for complex application structures
  • Built-in components for handling navigation and route matching
  • Seamless integration with React's component-based architecture

Cons

  • Learning curve for developers new to client-side routing concepts
  • Can add complexity to smaller applications that don't require advanced routing
  • Occasional breaking changes between major versions
  • Performance overhead for very large applications with many routes

Code Examples

  1. Basic route setup:
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}
  1. Using navigation hooks:
import { useNavigate } from "react-router-dom";

function NavigationButton() {
  const navigate = useNavigate();

  return <button onClick={() => navigate("/about")}>Go to About</button>;
}
  1. Nested routes:
import { Routes, Route, Outlet } from "react-router-dom";

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="dashboard" element={<Dashboard />}>
        <Route path="stats" element={<Stats />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

Getting Started

To start using React Router in your project:

  1. Install the package:

    npm install react-router-dom
    
  2. Wrap your app with BrowserRouter:

    import { BrowserRouter } from "react-router-dom";
    
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById("root")
    );
    
  3. Define your routes:

    import { Routes, Route } from "react-router-dom";
    
    function App() {
      return (
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      );
    }
    
  4. Use navigation components or hooks to move between routes:

    import { Link, useNavigate } from "react-router-dom";
    
    function Navigation() {
      const navigate = useNavigate();
    
      return (
        <nav>
          <Link to="/about">About</Link>
          <button onClick={() => navigate("/contact")}>Contact</button>
        </nav>
      );
    }
    

Competitor Comparisons

124,777

The React Framework

Pros of Next.js

  • Built-in server-side rendering and static site generation
  • Automatic code splitting for faster page loads
  • Integrated API routes for backend functionality

Cons of Next.js

  • Steeper learning curve due to additional concepts and conventions
  • Less flexibility in routing compared to React Router
  • Potential vendor lock-in with Vercel's ecosystem

Code Comparison

Next.js routing:

// pages/about.js
export default function About() {
  return <h1>About Page</h1>
}

React Router routing:

// App.js
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Summary

Next.js offers a more comprehensive framework with built-in features for server-side rendering and API routes, while React Router provides a more flexible and lightweight routing solution for React applications. Next.js may be better suited for larger projects requiring advanced features, while React Router is ideal for simpler applications or those needing more control over routing implementation.

29,083

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

Pros of Remix

  • Full-stack framework with built-in server-side rendering and data loading
  • Simplified data management with loader and action functions
  • Improved performance through intelligent code splitting and prefetching

Cons of Remix

  • Steeper learning curve due to its full-stack nature
  • Less flexibility in choosing backend technologies
  • Requires more setup and configuration compared to React Router

Code Comparison

Remix (route file):

export async function loader({ params }) {
  const user = await getUser(params.id);
  return json({ user });
}

export default function UserProfile() {
  const { user } = useLoaderData();
  return <h1>{user.name}</h1>;
}

React Router (component file):

import { useParams } from 'react-router-dom';

export default function UserProfile() {
  const { id } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    getUser(id).then(setUser);
  }, [id]);

  return user ? <h1>{user.name}</h1> : <p>Loading...</p>;
}

Remix offers a more integrated approach to data fetching and rendering, while React Router focuses on client-side routing and leaves data management to the developer. Remix's server-side capabilities can lead to improved performance and SEO, but may require more initial setup and learning. React Router provides more flexibility and easier integration with existing React applications.

6,901

Pros of reach/router

  • Simpler API with less boilerplate code
  • Built-in accessibility features for route announcements
  • Automatic focus management for improved user experience

Cons of reach/router

  • Less active development and community support
  • Fewer advanced features compared to React Router
  • Limited documentation and examples available

Code Comparison

reach/router:

import { Router } from "@reach/router"

<Router>
  <Home path="/" />
  <Dashboard path="dashboard" />
  <Profile path="profile/:id" />
</Router>

React Router:

import { BrowserRouter, Routes, Route } from "react-router-dom"

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="dashboard" element={<Dashboard />} />
    <Route path="profile/:id" element={<Profile />} />
  </Routes>
</BrowserRouter>

Summary

reach/router offers a simpler API and built-in accessibility features, making it easier to set up basic routing. However, it has less active development and fewer advanced features compared to React Router. React Router provides more flexibility and a larger ecosystem but requires slightly more setup. The choice between the two depends on project requirements and developer preferences.

6,590

🥢 A minimalist-friendly ~2.1KB routing for React and Preact

Pros of wouter

  • Lightweight and minimalistic (only ~1.5KB gzipped)
  • Simple API with hooks-based approach
  • No dependencies, making it easy to integrate

Cons of wouter

  • Less feature-rich compared to React Router
  • Smaller community and ecosystem
  • Limited support for advanced routing scenarios

Code Comparison

wouter:

import { Route, Switch } from "wouter";

<Switch>
  <Route path="/users/:id" component={UserProfile} />
  <Route path="/about" component={About} />
</Switch>

React Router:

import { Route, Switch } from "react-router-dom";

<Switch>
  <Route path="/users/:id" component={UserProfile} />
  <Route path="/about" component={About} />
</Switch>

Summary

wouter is a lightweight alternative to React Router, offering a simple API and small bundle size. It's ideal for projects that require basic routing functionality without the need for advanced features. React Router, on the other hand, provides a more comprehensive routing solution with a larger ecosystem and support for complex routing scenarios.

The choice between the two depends on the project's requirements, with wouter being suitable for smaller applications or those prioritizing minimal bundle size, while React Router is better suited for larger, more complex applications that need advanced routing capabilities.

Declarative routing for React

Pros of react-router

  • More established and widely adopted in the React ecosystem
  • Extensive documentation and community support
  • Flexible and customizable for various routing scenarios

Cons of react-router

  • Larger bundle size due to additional features
  • Steeper learning curve for advanced usage
  • May require additional configuration for complex routing patterns

Code Comparison

react-router:

import { BrowserRouter, Route, Switch } from 'react-router-dom';

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
</BrowserRouter>

react-router:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
]);

<RouterProvider router={router} />

Both repositories are maintained by the same organization and serve similar purposes. The main difference lies in their approach to routing configuration and API design. react-router offers a more traditional, component-based routing approach, while react-router introduces a new data-driven routing system. The choice between the two depends on specific project requirements and developer preferences.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Welcome to React Router · npm package build

React Router is a lightweight, fully-featured routing library for the React JavaScript library. React Router runs everywhere that React runs; on the web, on the server (using node.js), and on React Native.

If you're new to React Router, we recommend you start with the tutorial.

If you're migrating to v6 from v5 (or v4, which is the same as v5), check out the migration guide. If you're migrating from Reach Router, check out the migration guide for Reach Router. If you need to find the code for v5, it is on the v5 branch.

Documentation for v6 can be found on our website.

Contributing

There are many different ways to contribute to React Router's development. If you're interested, check out our contributing guidelines to learn how you can get involved.

Packages

This repository is a monorepo containing the following packages:

Changes

Detailed release notes for a given version can be found on our releases page.

Funding

You may provide financial support for this project by donating via Open Collective. Thank you for your support!

About

React Router is developed and maintained by Remix Software and many amazing contributors.

NPM DownloadsLast 30 Days