UseNavigate Hook in React Router 2025
UseNavigate Hook in React Router 2025
useNavigate hook is used to programmatically navigate to a different route in React Router v6+. It replaces the older useHistory method from previous versions.
🎯 Why Use useNavigate?
- To redirect users after an action (e.g., login, form submission).
- To navigate without using a component.
- For conditional routing in JavaScript logic.
📦 Installation
npm install react-router-dom
🚀 Basic Example
import { useNavigate } from "react-router-dom";
function Login() {
const navigate = useNavigate();
const handleLogin = () => {
// Assume login success
navigate("/dashboard");
};
return (
Login Page
);
}
⚡ Navigate with Replace
If you want to navigate and replace the current entry in the history stack (like redirect after login), use:
navigate("/dashboard", { replace: true });
✅ Summary
useNavigate is essential for redirecting users dynamically in your app. It enhances navigation logic with flexibility and cleaner code in 2025 React applications.