How to Pass Data When Using the Navigate Function in React Router v6 ?

React Router stands as a well-regarded library designed for the management of routing within React applications. The emergence of React Router v6 has brought forth a multitude of alterations and enhancements. Notably, it has introduced a novel method for route navigation through the utilization of the ‘navigate’ function. Within the confines of this article, we shall delve into the intricacies of transferring data when employing the ‘navigate’ function within React Router v6.

Understanding the navigate Function

n React Router v6, the navigate function plays a pivotal role in facilitating navigation. This function serves the purpose of enabling programmatic transitions between various routes within your application. Importable from the react-router-dom package, the navigate function proves exceptionally versatile as it finds application within functional components, effectively initiating navigation actions.

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

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

  const handleNavigation = () => {
    // Use the navigate function to navigate to a specific route
    navigate('/destination');
  };

  return (
    <button onClick={handleNavigation}>Navigate</button>
  );
}

Passing Data with the navigate Function

In numerous scenarios, there arises a requirement to transfer data between distinct routes during the navigation process. React Router v6 offers an uncomplicated and versatile method to achieve this goal. It allows you to transmit data as an object through the ‘state’ property of the ‘navigate’ function.

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

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

  const handleNavigation = () => {
    // Pass data using the state property
    navigate('/destination', { someData: 'Hello, world!' });
  };

  return (
    <button onClick={handleNavigation}>Navigate</button>
  );
}

In this example, we’re passing an object { someData: 'Hello, world!' } as the second argument to the navigate function. This data can be accessed in the destination route.

Accessing Passed Data in the Destination Route

To access the data that was passed using the navigate function, you can use the useLocation hook in the destination route. Here’s how you can do it:

javascriptCopy codeimport { useLocation } from 'react-router-dom';

function DestinationComponent() {
  const { state } = useLocation();

  return (
    <div>
      <h1>Data from Source Route:</h1>
      <p>{state.someData}</p>
    </div>
  );
}

In this example, we use the useLocation hook to access the location object, which contains the data passed using the navigate function. We can then access the data by using location.state.someData.

Conclusion

React Router v6 brings forth the navigate function, serving as a potent instrument for enabling programmatic navigation within your React applications. Furthermore, it facilitates the effortless transmission of data between routes by leveraging the state property inherent to the navigate function. By adhering to the guidelines presented in this article, you can guarantee that your React Router v6-driven applications possess the capacity to transmit and acquire data seamlessly across various routes, thereby elevating the overall user experience of your web-based applications.