A curated list of awesome resources, libraries, tutorials, and open-source projects for React Router.
React Router is the standard routing library for React. The latest version, v7, unifies React Router and Remix, bringing framework-level capabilities like SSR, streaming, and first-class type safety to any React application.
- Official Resources
- Getting Started
- Ecosystem & Libraries
- Deployment
- Advanced Topics
- Learning Resources
- Migration Guides
- Examples & Starter Kits
- Real World Examples
- Community & Support
- Contributing
- React Router Website - The official documentation, featuring the latest API references and tutorials.
- GitHub Repository - The source code, hosted by the Remix team.
- Remix - Remix and React Router have merged in v7. Remix is now effectively React Router v7.
- Release Notes - Stay up to date with the latest changes.
- Official Tutorial - The best place to start. Builds a "Contacts" app using the modern Data Router APIs.
Tools and libraries that extend the functionality of React Router.
Tools that generate routes based on your file structure, similar to Next.js or Nuxt.
- Vite Plugin Pages - File system based routing for Vite, compatible with React Router.
- use-query-params - A library for managing state through URL query parameters.
- react-router-hash-link - Solves the issue of scrolling to hash elements (anchors) on a page when using React Router.
- use-react-router-breadcrumbs - A hook that allows you to create automatic breadcrumbs based on your route config.
- react-router-tabs - Tab components linked to React Router routes.
- react-breadcrumbs - Automated breadcrumb navigation.
- react-navigation-tabs - Mobile-friendly tab navigation (React Native + React Router Native).
- react-router-modal - Modal routes (render modals as part of the route hierarchy).
- react-router-dropdown - Dropdown menus with route links.
- react-router-bootstrap - Integration between React Router and React-Bootstrap UI components (LinkContainer).
- framer-motion - While not a router library, it is the standard for animating route transitions (AnimatePresence) in React Router apps.
Deploy React Router v7 applications to various hosting platforms with SSR support.
- Vercel - Deploy to Vercel with edge functions and serverless support.
- EdgeOne Pages - Tencent's edge computing platform for deploying React Router apps globally with low latency.
- Netlify - Adapter for Netlify with edge functions and serverless deployment.
- Cloudflare Pages - Deploy to Cloudflare Pages with Workers integration for edge computing.
- React.lazy + Suspense - Built-in React lazy loading for route components.
- loadable-components - Advanced code splitting with SSR support.
- @loadable/component - Modern replacement for react-loadable, with React Router integration.
- react-loadable - Legacy (but still used) code splitting library for React Router.
- react-router-guards - Declarative route guards for auth, role-based access, etc.
- react-router-auth - Protect routes with authentication checks.
- clerk-react-router - Clerk's auth integration for React Router (user management, SSO).
- next-auth - Authentication library that works with React Router (and Next.js).
- @testing-library/jest-dom - Test route changes with React Testing Library.
- react-router-test-context - Mock React Router context for unit tests.
- msw - Mock API responses for routes that fetch data (works with React Router loaders).
- cypress-react-router - Cypress commands for testing React Router navigation.
- playwright-react-router - Test React Router with Playwright's E2E tools.
- A complete guide to routing in React - Learn how to perform routing in React using React router, as well as the various aspects of routing and how React router handles them.
- Understanding the Data Router - An essential read by the Remix team explaining why v6.4 introduced Loaders and Actions.
- React Router 7 Tutorial (framework mode) - Learn React Router v7 by building an address book app! This tutorial demonstrates core features, from setup and routing strategies to data fetching with loaders and actions.
- React Router V7 Tutorial - Routing, Nested Routes, Data Loading, Layouts... - In this comprehensive tutorial, dive deep into the new features of React Router version 7 and learn how to harness its power as a framework to build robust, data-driven React applications.
- React Router 6 – Tutorial for Beginners - Web Dev Simplified provides a crash course on the v6 syntax.
- Remixing React Router (React Conf) - Ryan Florence demonstrates the power of v6.4 Data APIs and how they eliminate "useEffect" waterfalls.
- Upgrading from v6 - The official guide for upgrading from React Router v6 to v7.
- Upgrading from Remix - The official guide for upgrading from Remix to React Router v7.
- Adopting Framework Features - How to incrementally adopt new v7 framework features (SSR, data loading) in existing apps.
- Migrating to v6 (Official Guide) - The definitive guide for upgrading legacy applications from v5 to v6.
- The Complete Guide to React Router v6 Migration - A detailed breakdown of the breaking changes.
- React Router Hybrid Rendering Template - A comprehensive React Router v7 starter template for EdgeOne Pages, showcasing various rendering modes and full-stack capabilities.
- React Router v6 Starter - Official basic example (routes, nested routes, links).
- React Router + TypeScript Starter - Type-safe routing starter.
- React Router + Tailwind CSS Starter - Minimal app with routing and Tailwind.
- React Router + Redux Starter - Integrate React Router with Redux.
- Astro + React Router - Use React Router in an Astro project (cross-framework).
- React Router PWA Starter - Progressive Web App with React Router.
Open-source projects that demonstrate React Router in production-grade architectures.
- Bulletproof React - A simple, scalable, and powerful architecture for building React applications. Shows how to organize routes cleanly.
- Jira Clone - A high-quality clone of Jira using React and React Router.
- TakeNote - A web-based note-taking app that uses React Router for navigation.
- React Router Discord - Chat with maintainers and other users.
- React Router GitHub Discussions - Share ideas and get support.
- Stack Overflow React Router Tag - Ask and answer questions.
- Reddit r/reactjs - Discuss React Router topics.
- Twitter #ReactRouter - Follow latest updates and community discussions.
Contributions are welcome! Please read the contribution guidelines first.
- Fork the repository.
- Create a branch for your edit.
- Add your resource to the appropriate section (alphabetical order is preferred).
- Submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.