🌐

React Router v7 Overview

Aug 4, 2025

View transcript

Overview

This lecture covers React Router version 7, focusing on its framework features, creating and structuring routes, data loading, rendering strategies, actions, navigation, and UI states for efficient data-driven React applications.

Setting Up React Router v7

  • Install a new project using npx create react-router@latest .
  • Choose to initialize a Git repository and install dependencies during setup.
  • The default project includes Vite, Tailwind CSS, and optional Docker files.
  • Main project files: root.tsx (layout), routes.ts (route definitions), and the routes folder (component pages).

Routing Fundamentals

  • Routes are defined in routes.ts as objects specifying path and component file.
  • The Outlet component in root.tsx renders the matching route's component.
  • Home route (index) is set by defining index: true and pointing to the relevant component.

Creating Routes

  • Add new routes by updating routes.ts and creating new component files (e.g., about.tsx).
  • Use export default function <Name>() for route components.

Dynamic & Nested Routes

  • Dynamic routes use parameters, e.g., /post/:postId, defined with path: "post/:postId".
  • Use loader functions to access route params and load data.
  • Nested routes are created by adding a children array to a route definition and placing an Outlet in the parent component.
  • Layouts allow sharing UI between routes without URL segments.

Prefixes and Advanced Route Grouping

  • prefix property can be used to group multiple routes under a common path segment.

Rendering Strategies

  • Client-side Rendering (CSR): set serverSideRendering: false in config.
  • Server-side Rendering (SSR): enabled by default for better SEO and performance.
  • Static Pre-rendering: define a preRender function to generate static HTML at build time.

Data Loading

  • Use loader (for SSR) or clientLoader (for client data fetching) in route modules.
  • Access fetched data in components via loaderData.

Actions and Mutations

  • Use action (SSR) or clientAction (browser) for mutating data (POST, DELETE, etc.).
  • The Form component submits requests and triggers respective actions.
  • Returned data from actions can be accessed via action-related hooks.

Forms and Fetchers

  • Form causes navigation/history updates; use fetcher.Form for in-place updates without navigation.
  • Access action status and returned data using fetcher hook.

Navigation Methods

  • Use redirect in loader/action for programmatic navigation post-submit.
  • Use useNavigate hook for navigation from components.
  • Link and NavLink components render navigation links; NavLink provides active/pending state styling.

Pending/Loading UI

  • useNavigation hook indicates pending navigations for route transitions.
  • fetcher.state flag shows loading status during actions (e.g., "Deleting post...").

Key Terms & Definitions

  • Route — Defines a URL path and maps it to a React component.
  • Outlet — Placeholder for displaying child route components.
  • Loader/ClientLoader — Functions to fetch data for routes (server/client).
  • Action/ClientAction — Functions to handle data mutations (server/client).
  • Form — React Router component to submit data and trigger actions.
  • fetcher.Form — Form for background data submission without navigation.
  • useNavigate — Hook for component-based navigation.
  • Link/NavLink — Components for navigation links; NavLink supports active styling.
  • useNavigation — Hook providing navigation state for UI feedback.
  • Static Pre-rendering — Generates static pages at build time for faster loads and SEO.

Action Items / Next Steps

  • Practice creating routes, loaders, and actions in a sample app.
  • Read the official documentation on rendering strategies.
  • Experiment with NavLink styling and pending UI for navigation feedback.

Full transcript