# How to Implement a React Router DOM Redirect in React Router v6

> Learn how to implement a React Router DOM redirect in React Router v6 using the Navigate component or useNavigate hook for seamless user navigation.

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

---

**Use the `<Navigate>` component for declarative redirects in JSX or the `useNavigate` hook for imperative navigation in event handlers and effects.**

React Router v6 fundamentally changed how developers handle navigation by removing the legacy `<Redirect>` component in favor of more flexible APIs. If you are upgrading an application or building a new one within the `facebook/react` ecosystem, understanding the correct way to trigger a **react router dom redirect** is essential for maintaining clean, declarative routing logic.

## Why React Router v6 Removed the `<Redirect>` Component

The v6 architecture shifted toward a fully element-based route configuration. The old `<Redirect>` component relied on route rendering patterns that conflicted with the new nested route model and data APIs. Replacing it with `<Navigate>` and `useNavigate` allows the router to handle **react router dom redirect** logic consistently across both declarative JSX and imperative JavaScript contexts.

## React Router DOM Redirect Methods in v6

### Using the `<Navigate>` Component for Declarative Redirects

The `<Navigate>` component renders a redirect element that changes the current location. When used with the `replace` prop, it swaps the current history entry instead of pushing a new one.

```tsx
import { Routes, Route, Navigate } from "react-router-dom";

function App() {
  return (
    <Routes>
      {/* Static react router dom redirect from old path to new path */}
      <Route 
        path="/old-path" 
        element={<Navigate to="/new-path" replace />} 
      />
      <Route path="/new-path" element={<NewPage />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

```

The `<Navigate>` component tells the router to replace the current location with `/new-path`.

### Using the `useNavigate` Hook for Imperative Redirects

For dynamic navigation based on state, authentication status, or async operations, use the `useNavigate` hook. It returns a function that accepts a path and optional state object.

**Conditional redirect in a protected route:**

```tsx
import { useEffect } from "react";
import { useNavigate, Outlet } from "react-router-dom";

function RequireAuth({ isAuthenticated }) {
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated) {
      // React router dom redirect preserving original location
      navigate("/login", { 
        replace: true, 
        state: { from: location } 
      });
    }
  }, [isAuthenticated, navigate]);

  return isAuthenticated ? <Outlet /> : null;
}

```

`useNavigate` is called inside `useEffect` once the auth status is known.

**Redirect after form submission:**

```tsx
import { useNavigate } from "react-router-dom";

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    // Process form data...
    
    // Imperative react router dom redirect on success
    navigate("/thank-you", { replace: true });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
      <button type="submit">Send</button>
    </form>
  );
}

```

The navigation is performed imperatively after the async request resolves.

## When to Use Each React Router DOM Redirect Approach

Choose your navigation strategy based on the context of the redirect:

- **`<Navigate>`**: Use for static route mappings, legacy URL support, or any declarative scenario where the redirect logic lives entirely in the route configuration.
- **`useNavigate`**: Use for conditional logic, authentication guards, async post-action navigation, or any imperative scenario requiring programmatic control.

## Core React Files Supporting Navigation

While React Router is a separate package, it relies on the core `facebook/react` repository for hook implementation and DOM interaction. The following files provide the underlying machinery that powers `useNavigate` and navigation transitions:

- **[`packages/react/src/ReactHooks.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js)**: Contains the core hook implementation that React Router builds upon to create the `useNavigate` hook.

- **[`packages/react-dom/src/client/ReactDOMDefaultTransitionIndicator.js`](https://github.com/facebook/react/blob/main/packages/react-dom/src/client/ReactDOMDefaultTransitionIndicator.js)**: Handles navigation events at the DOM level, managing transition indicators during route changes.

- **[`scripts/flow/environment.js`](https://github.com/facebook/react/blob/main/scripts/flow/environment.js)**: Defines the Flow type signatures for navigation functions, ensuring type safety across the navigation API.

## Summary

- React Router v6 removed the `<Redirect>` component; use `<Navigate>` or `useNavigate` instead.
- **`<Navigate>`** provides declarative **react router dom redirect** capabilities ideal for static route configurations.
- **`useNavigate`** offers imperative navigation for dynamic conditions, authentication checks, and post-action redirects.
- Both APIs support the `replace` option to modify history stack behavior.
- The underlying implementation relies on core React hooks and DOM packages from the `facebook/react` repository.

## Frequently Asked Questions

### What happened to the `<Redirect>` component in React Router v6?

The `<Redirect>` component was removed in v6 because its implementation conflicted with the new nested route architecture and data APIs. It has been replaced by the `<Navigate>` component for declarative redirects and the `useNavigate` hook for imperative navigation, both of which integrate better with the modern React Router lifecycle.

### How do I prevent users from using the back button after a redirect?

Pass `replace: true` as an option to your navigation function or include the `replace` prop on the `<Navigate>` component. This replaces the current history entry instead of pushing a new one, effectively removing the original URL from the browser history so the back button will skip over it.

### Can I pass state through a react router dom redirect?

Yes. When using `useNavigate`, include a `state` object in the options parameter: `navigate("/path", { state: { from: location } })`. When using `<Navigate>`, pass the state via the `state` prop: `<Navigate to="/path" state={{ from: location }} replace />`. The receiving component can access this state via the `useLocation` hook.

### Is useNavigate available in React Router v5?

No, `useNavigate` is exclusive to React Router v6. In v5, you would use the `useHistory` hook and call `history.push()` or `history.replace()` for programmatic navigation. When migrating from v5 to v6, replace all `useHistory` usages with `useNavigate` and update the method signatures accordingly.