Programmatic Navigation with useHistory in React JS

In React applications, navigation is usually handled through React Router, which provides various ways to programmatically navigate between different routes. One of the most common ways to handle navigation in functional components is by using the useHistory hook.

What is useHistory?

The useHistory hook is part of the react-router-dom library and provides access to the history instance, which allows you to navigate programmatically. This is useful when you need to redirect a user based on some action, such as after a form submission or an event like clicking a button.

How to Use useHistory

The useHistory hook returns the history object, which has methods like push, replace, and goBack to navigate between routes. Let’s take a look at an example.

Example: Using useHistory to Navigate Programmatically

In this example, we will create a simple app with a "Login" button. When the button is clicked, we will use the useHistory hook to navigate to a new route.

          
              import React from 'react';
              import { BrowserRouter as Router, Route, Link, useHistory } from 'react-router-dom';

              function Home() {
                  return (
                      

                          
Home Page

                          Go to Login
                      

                  );
              }

              function Login() {
                  const history = useHistory();

                  const handleLogin = () => {
                      // Simulate a login action
                      console.log("User logged in!");
                      // Navigate to the dashboard after login
                      history.push('/dashboard');
                  };

                  return (
                      

                          
Login Page

                          
                      

                  );
              }

              function Dashboard() {
                  return 
Dashboard
;
              }

              function App() {
                  return (
                      
                          

                              
React Programmatic Navigation with useHistory

                              
                              
                              
                          

                      
                  );
              }

              export default App;

In this example:

  • The Home component contains a link to the "Login" page.
  • In the Login component, we use the useHistory hook to get access to the history object.
  • The handleLogin function simulates a login action and then calls history.push('/dashboard') to navigate to the dashboard page.
  • The user is redirected to the Dashboard component after clicking the "Login" button.

Other Navigation Methods with useHistory

Besides push, useHistory provides several other methods for navigation:

  • history.push(path): Adds a new entry to the browser's history stack and navigates to the specified path.
  • history.replace(path): Replaces the current entry in the history stack with the new path. This is useful when you don’t want the user to be able to navigate back to the previous page.
  • history.goBack(): Goes back to the previous page in the browser's history stack. This can be useful for implementing a "Back" button in your app.
  • history.goForward(): Goes forward to the next page in the history stack.

Example: Using history.replace

Let’s update the previous example to use history.replace instead of history.push to redirect the user after they log in. This will prevent the user from navigating back to the login page once they are on the dashboard.

          
              function Login() {
                  const history = useHistory();

                  const handleLogin = () => {
                      console.log("User logged in!");
                      // Replace the current history entry with the dashboard route
                      history.replace('/dashboard');
                  };

                  return (
                      

                          
Login Page

                          
                      

                  );
              }

With this change, after the user logs in, the browser history is updated to reflect the dashboard page, but they won’t be able to use the "Back" button to return to the login page.

Conclusion

Programmatic navigation is an important feature in React applications, allowing you to control routing based on events or actions. The useHistory hook is a simple and effective way to navigate to different routes programmatically, using methods like push, replace, and goBack. By incorporating useHistory into your React components, you can create a seamless and dynamic navigation experience in your application.




Advertisement