How to redirect in React Router
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Redirecting users to different routes is a common requirement in React applications, especially for authentication flows or after form submissions.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented countless redirect patterns in production components.
From my 25 years of experience in web development and 11 years with React, the most efficient and modern solution is to use React Router’s Navigate component for declarative redirects and the useNavigate hook for programmatic redirects.
Both methods provide clean, predictable navigation behavior.
Use the Navigate component for declarative redirects or the useNavigate hook for programmatic redirects.
import { Navigate, useNavigate } from 'react-router-dom'
// Declarative redirect
function ProtectedRoute({ children, isAuthenticated }) {
if (!isAuthenticated) {
return <Navigate to='/login' replace />
}
return children
}
// Programmatic redirect
function LoginForm() {
const navigate = useNavigate()
const handleSubmit = () => {
// After successful login
navigate('/dashboard')
}
return <form onSubmit={handleSubmit}>...</form>
}
The Navigate component renders a redirect immediately when the component mounts, making it perfect for conditional redirects like route protection. The replace prop replaces the current entry in the history stack instead of adding a new one. The useNavigate hook returns a function that lets you navigate programmatically, ideal for redirects after user actions like form submissions or button clicks.
This is the same reliable approach we use in CoreUI admin templates to handle authentication flows and user navigation.
For external URLs, use window.location.href = 'https://example.com' instead of React Router navigation.
