Programmatic Navigation in React
Programmatic Navigation in React
In React applications, navigation usually happens when users click on links or buttons to move between pages or views. However, sometimes you want to navigate programmatically — that is, trigger navigation based on code logic instead of user clicks. This is common after form submissions, authentication, or conditional flows.
What is Programmatic Navigation?
Programmatic navigation means changing the route (URL) in your React app through code rather than by clicking a <Link> or typing the URL manually. It lets you redirect users automatically as part of your app’s logic.
How to Implement Programmatic Navigation in React
The most common way to handle navigation in React apps is by using React Router, a popular routing library. Here’s how you can do programmatic navigation with React Router:
Using React Router v6+
Import the useNavigate Hook
React Router v6 introduced the useNavigate hook for programmatic navigation.
jsx
Copy
Edit
import { useNavigate } from 'react-router-dom';
Invoke Navigation in Your Component
Inside your component, call useNavigate() to get the navigation function.
jsx
Copy
Edit
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
// Navigate to "/dashboard" programmatically
navigate('/dashboard');
};
return (
<button onClick={handleClick}>Go to Dashboard</button>
);
}
Optional: Navigate with State or Replace History
You can pass options such as state data or replace the current history entry instead of pushing a new one.
jsx
Copy
Edit
navigate('/profile', { replace: true, state: { from: 'login' } });
When to Use Programmatic Navigation?
After successful form submission (e.g., redirect to a confirmation page)
After user login/logout to redirect to a protected or public route
Conditional redirects based on user roles or permissions
Navigation triggered by events other than user clicks (e.g., timers, API responses)
Summary
Programmatic navigation in React enables dynamic route changes controlled by your app’s logic. Using React Router’s useNavigate hook, you can easily redirect users as needed without relying solely on clickable links, enhancing user experience and flow control.
Learn React JS Course in Hyderabad
Read More
Nested Routes in React Explained
Best Practices for Managing Forms in React
Visit Our Quality Thought Training in Hyderabad
Comments
Post a Comment