[React] useNavigate

[mahfujul-helios]

useNavigate

What is useNavigate ?

"UseNavigate is a function provided by the React Router library, specifically designed for use within functional components. It serves as a tool for navigating programmatically between different routes within a React application. By importing useNavigate from the react-router-dom package, developers gain access to a navigate function that can be utilized to trigger route changes based on various conditions or user interactions. Whether in response to button clicks, form submissions, or other dynamic events, useNavigate empowers developers to seamlessly transition users to different parts of the application without the need for traditional anchor tags or manual manipulation of browser history. Leveraging useNavigate enhances the user experience by enabling smooth and efficient navigation within the React Router-managed ecosystem."

How it's work

useNavigate is a hook provided by the React Router library, facilitating programmatic navigation within React functional components. Upon importing useNavigate from the react-router-dom package, developers gain access to a function that enables seamless transitions between different routes within a React application. By simply calling useNavigate(), a navigate function is obtained, which can be invoked with the desired route as an argument. This function triggers a navigation event, causing React Router to update the URL in the browser's address bar and render the corresponding component associated with the specified route. The versatility of useNavigate extends further with the option to pass additional data or configuration parameters, such as state or replace behavior, providing developers with greater flexibility in managing navigation flows. In essence, useNavigate empowers developers to create dynamic and interactive user experiences by allowing for intuitive navigation logic directly within functional components, enhancing the overall usability and responsiveness of React applications.

Some example

Import useNavigate: You need to import useNavigate from the react-router-dom package at the top of your functional component file.

import { useNavigate } from 'react-router-dom';

Call useNavigate: Inside your functional component, call useNavigate() to get a navigate function.

const navigate = useNavigate();

Use navigate Function: You can use the navigate function to navigate to different routes programmatically in response to user interactions, data fetching, or any other logic within your component.

const handleClick = () => {
  // Navigate to a different route
  navigate('/another-route');
};

You can call navigate with the desired URL to navigate to that route. You can also pass additional options such as state or replace behavior.

Here's a complete example of how you might use useNavigate in a React functional component:

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    // Navigate to a different route when a button is clicked
    navigate('/another-route');
  };

  return (
    <div>
      <h1>My Component</h1>
      <button onClick={handleClick}>Go to Another Route</button>
    </div>
  );
}

In this example, when the button is clicked, the handleClick function is called, which in turn calls navigate('/another-route'), navigating the user to the /another-route URL within the React Router-managed routes of the application.

Another example

import { useNavigate } from '@tanstack/react-router'

function PostsPage() {
  const navigate = useNavigate({ from: '/posts' })
  const handleClick = () => navigate({ search: { page: 2 } })
  // ...
}

function Component() {
  const navigate = useNavigate()
  return (
    <div>
      <button
        onClick={() =>
          navigate({
            to: '/posts',
          })
        }
      >
        Posts
      </button>
      <button
        onClick={() =>
          navigate({
            to: '/posts',
            search: { page: 2 },
          })
        }
      >
        Posts (Page 2)
      </button>
      <button
        onClick={() =>
          navigate({
            to: '/posts',
            hash: 'my-hash',
          })
        }
      >
        Posts (Hash)
      </button>
      <button
        onClick={() =>
          navigate({
            to: '/posts',
            state: { from: 'home' },
          })
        }
      >
        Posts (State)
      </button>
    </div>
  )
}

conclusion

useNavigate serves as a powerful tool in React applications, offering a straightforward mechanism for managing route navigation within functional components. By leveraging this hook provided by React Router, developers can streamline the user experience by implementing dynamic navigation logic without the need for complex state management or manual URL manipulation. The simplicity and flexibility of useNavigate empower developers to create more interactive and intuitive user interfaces, ultimately enhancing the overall usability and responsiveness of React applications. With its ability to seamlessly transition between different routes and the option to pass additional configuration parameters, useNavigate represents a key feature in building modern, client-side routing solutions within React-based web applications.