How to Redirect in React Router: Simple Guide with Examples

In React Router v6, use the Navigate component to redirect users programmatically or declaratively. For example, render <Navigate to='/path' /> inside your component to redirect immediately. You can also use the useNavigate hook to redirect on events like button clicks.

Syntax

The main ways to redirect in React Router v6 are:

• <Navigate to="/path" />: A component that redirects immediately when rendered.
• const navigate = useNavigate();: A hook that returns a function to redirect programmatically.
• navigate('/path');: Call this function to redirect on events like clicks.

jsx

import { Navigate, useNavigate } from 'react-router-dom';

// Declarative redirect
function Component() {
  return <Navigate to="/home" />;
}

// Programmatic redirect inside a component
function AnotherComponent() {
  const navigate = useNavigate();
  // Call navigate('/home') inside event handlers or effects
}

Example

This example shows a button that redirects to the home page when clicked using the useNavigate hook, and a component that redirects immediately using Navigate.

jsx

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from 'react-router-dom';

function RedirectButton() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/home')}>Go to Home</button>
  );
}

function ImmediateRedirect() {
  return <Navigate to="/home" />;
}

function Home() {
  return <h2>Home Page</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<RedirectButton />} />
        <Route path="/redirect" element={<ImmediateRedirect />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

Output

On path '/', a button labeled 'Go to Home' is shown. Clicking it navigates to '/home' and displays 'Home Page'. Visiting '/redirect' immediately shows 'Home Page'.

Common Pitfalls

• Using Redirect component from older React Router versions instead of Navigate.
• Trying to redirect by returning navigate('/path') directly instead of calling it inside an event or effect.
• Not wrapping your app in <BrowserRouter>, which is required for routing to work.
• Using Navigate outside of a Routes context or without proper routing setup.

jsx

/* Wrong: Using Redirect (React Router v5) in v6 */
// import { Redirect } from 'react-router-dom';
// return <Redirect to="/home" />; // This will not work in v6

/* Right: Use Navigate in v6 */
import { Navigate } from 'react-router-dom';
return <Navigate to="/home" />;

Quick Reference

Method	Usage	When to Use
	Render inside JSX	Redirect immediately when component renders
const navigate = useNavigate(); navigate('/path');	Call inside event handlers or effects	Redirect on user actions or logic
	Wrap your app	Required for routing to work

Key Takeaways

Use component to redirect immediately in React Router v6.

Use useNavigate hook for programmatic redirects on events like clicks.

Always wrap your app with for routing to function.

Avoid using deprecated Redirect component from older React Router versions.

Redirects must happen inside routing context (within Routes and Router).