Home >Web Front-end >JS Tutorial >Mastering Navigation in React with the useNavigate Hook
The useNavigate hook is part of React Router (v6 and above) and is used to programmatically navigate between different routes in your application. Unlike traditional navigation (e.g., clicking on links), the useNavigate hook allows you to navigate dynamically based on user actions, such as form submissions, button clicks, or state changes.
This hook replaces the older useHistory hook from React Router v5 and makes it easier to handle navigation within functional components.
The useNavigate hook returns a function that can be used to navigate programmatically to a specific route. You can pass a path or a location object to this function, and it will perform the navigation accordingly.
const navigate = useNavigate();
Here’s a simple example of how you can use the useNavigate hook to navigate programmatically when a user clicks a button.
import React from 'react'; import { useNavigate } from 'react-router-dom'; const Home = () => { const navigate = useNavigate(); const goToProfile = () => { // Navigate to the profile page navigate('/profile'); }; return ( <div> <h2>Home Page</h2> <button onClick={goToProfile}>Go to Profile</button> </div> ); }; export default Home;
You can also use useNavigate to navigate to dynamic routes, where you pass parameters.
const navigate = useNavigate();
When navigating, you can use the replace option to replace the current entry in the history stack instead of pushing a new one. This means that when the user clicks the browser's "back" button, they won't go back to the previous route.
import React from 'react'; import { useNavigate } from 'react-router-dom'; const Home = () => { const navigate = useNavigate(); const goToProfile = () => { // Navigate to the profile page navigate('/profile'); }; return ( <div> <h2>Home Page</h2> <button onClick={goToProfile}>Go to Profile</button> </div> ); }; export default Home;
You can pass additional state along with the navigation, which can then be accessed at the target route using useLocation.
import React from 'react'; import { useNavigate } from 'react-router-dom'; const UserList = () => { const navigate = useNavigate(); const goToUserProfile = (userId) => { // Navigate to the profile of a specific user by ID navigate(`/user/${userId}`); }; return ( <div> <h2>User List</h2> <button onClick={() => goToUserProfile(1)}>Go to User 1's Profile</button> <button onClick={() => goToUserProfile(2)}>Go to User 2's Profile</button> </div> ); }; export default UserList;
On the /settings route, you can access the passed state like this:
import React from 'react'; import { useNavigate } from 'react-router-dom'; const SubmitForm = () => { const navigate = useNavigate(); const handleSubmit = () => { // Perform form submission logic // Then navigate to a "Thank You" page, replacing the current entry in history navigate('/thank-you', { replace: true }); }; return ( <div> <h2>Submit Form</h2> <button onClick={handleSubmit}>Submit</button> </div> ); }; export default SubmitForm;
Redirect After Form Submission:
After submitting a form (e.g., user registration), you can redirect the user to a success or login page.
Conditional Navigation:
Based on user actions or conditions (like authentication), you can navigate to different routes dynamically.
Programmatic Routing:
You can navigate programmatically based on custom logic, such as when an action completes, or an event is triggered.
Navigating After Successful API Call:
After a successful API call (e.g., logging in), you can redirect users to their profile page or dashboard.
The useNavigate hook in React Router is a powerful tool for handling programmatic navigation in functional components. It allows you to navigate to different routes dynamically based on user actions or application state. With options like replace and the ability to pass state, useNavigate provides flexibility for controlling navigation behavior in React applications.
The above is the detailed content of Mastering Navigation in React with the useNavigate Hook. For more information, please follow other related articles on the PHP Chinese website!