How to Perform a React Router Redirect: A Complete Guide

React Router redirect functionality is not included in the React core library, so you must use the separate react-router-dom package—specifically the useNavigate hook or <Navigate> component in v6, or the <Redirect> component in v5—to handle navigation between routes.

The facebook/react repository contains the core rendering engine and reconciliation logic, but it does not provide any built-in routing or redirect utilities. To implement a react router redirect, you need to leverage the react-router ecosystem, which builds upon React's public API exported from packages/react/src/React.js to manage browser navigation history and route matching.

Understanding React Core vs. React Router

React core (maintained at facebook/react) focuses exclusively on component lifecycle, state reconciliation, and DOM rendering. The repository contains the Fiber reconciler at packages/react-reconciler/src/ReactFiberReconciler.new.js, which schedules and applies updates, and the DOM host config at packages/react-dom/src/client/ReactDOMHostConfig.js, which commits changes to the browser. However, route transitions and redirects are handled entirely by the separate react-router codebase, which treats React as a peer dependency and utilizes its rendering pipeline to swap components based on URL changes.

Implementing a React Router Redirect in v6

React Router v6 modernized navigation patterns by introducing hooks for imperative control and a dedicated component for declarative redirects.

Using the useNavigate Hook for Programmatic Redirects

The useNavigate hook returns a function that allows you to redirect users programmatically, optionally replacing the current history entry to prevent back-button navigation to the previous route.

// React Router v6 – redirect inside a component
import { useNavigate } from "react-router-dom";

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

  const handleClick = () => {
    // Perform a redirect to "/dashboard"
    navigate("/dashboard", { replace: true });
  };

  return <button onClick={handleClick}>Go to Dashboard</button>;
}

Using the Navigate Component for Declarative Redirects

For JSX-based redirects, such as conditional rendering inside routes, use the <Navigate> component with the replace prop to avoid accumulating history entries.

import { Navigate } from "react-router-dom";

function PrivateRoute({ isAuthenticated }) {
  if (!isAuthenticated) {
    // Declarative redirect to login
    return <Navigate to="/login" replace />;
  }
  return <Dashboard />;
}

Implementing Redirects in React Router v5

Version 5 utilizes a different API surface where the <Redirect> component and useHistory hook provide navigation capabilities.

Using the Redirect Component

The <Redirect> component renders a declarative redirect that updates the browser history when mounted.

// React Router v5 – declarative redirect in JSX
import { Redirect } from "react-router-dom";

function PrivateRoute({ isAuthenticated }) {
  return isAuthenticated ? (
    <Dashboard />
  ) : (
    // Redirect to the login page
    <Redirect to="/login" />
  );
}

How React Core Supports React Router Redirects

While the redirect logic and route matching algorithms reside in the react-router repository, the actual DOM updates triggered by a route change flow through React's core architecture:

• packages/react-reconciler/src/ReactFiberReconciler.new.js – The reconciler that schedules component updates when navigation state changes. When React Router detects a URL change, it triggers a state update that flows through this reconciler.
• packages/react-dom/src/client/ReactDOMHostConfig.js – The host configuration that commits DOM mutations. This is where the new route's component tree is finally flushed to the browser.
• packages/react/src/React.js – The public entry point exporting createElement, Component, and useState, which React Router's internal components import to build their own hooks and context providers.

Summary

• The facebook/react repository does not contain routing logic; React Router is a separate package that consumes React's public API.
• Use react-router-dom to implement a react router redirect in your application.
• React Router v6 uses the useNavigate hook for programmatic redirects and the <Navigate> component for declarative redirects.
• React Router v5 uses the <Redirect> component for navigation.
• Route changes ultimately trigger updates processed by the Fiber reconciler in packages/react-reconciler/src/ReactFiberReconciler.new.js.

Frequently Asked Questions

Does the facebook/react repository include React Router?

No, the facebook/react repository contains only the core React library, including the reconciler, scheduler, and JSX runtime. React Router is maintained in the remix-run/react-router repository and must be installed separately via npm as react-router-dom.

What is the difference between Redirect and Navigate in React Router?

<Redirect> is the component used in React Router v5 for declarative navigation, while <Navigate> serves the same purpose in v6 with a streamlined API. Both perform a react router redirect by triggering a history change, but they are version-specific and not interchangeable.

How do I perform a programmatic react router redirect in v6?

Import the useNavigate hook from react-router-dom and call the returned function with the target path. Pass { replace: true } as the second argument to redirect without adding a new entry to the browser history stack, effectively replacing the current URL.

Why doesn't React core have built-in redirect functionality?

React is designed as a declarative UI library focused on component rendering and state management. Routing depends on browser-specific APIs like the History API and URL parsing, which are application-level concerns. Therefore, navigation logic is implemented in the separate react-router package, which imports React's core functionality from packages/react/src/React.js to build route-aware components.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}