# How to Perform a React Router Redirect: A Complete Guide

> Learn how to perform a React Router redirect using useNavigate or the Navigate component in v6 or Redirect in v5. Master client-side routing with this comprehensive guide.

- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: how-to-guide
- Published: 2026-02-14

---

**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`](https://github.com/facebook/react/blob/main/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`](https://github.com/facebook/react/blob/main/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`](https://github.com/facebook/react/blob/main/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.

```jsx
// 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.

```jsx
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.

```jsx
// 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`](https://github.com/facebook/react/blob/main/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`](https://github.com/facebook/react/blob/main/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`](https://github.com/facebook/react/blob/main/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`](https://github.com/facebook/react/blob/main/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`](https://github.com/facebook/react/blob/main/packages/react/src/React.js) to build route-aware components.