How to pass and access data from one route to another with useLocation, useNavigate, and useHistory hooks.

When building a React application with multiple routes, passing data between routes can be challenging. Fortunately, React Router provides several hooks that allow you to pass props and access data from one route to another, including useNavigate, useHistory, and useLocation.

With these hooks, you can easily pass data between components, and retrieve data from the current location object.

In this article, we'll explore how to use these hooks to pass props and access data from one route to another in your React application. We'll cover how to pass data using state and how to retrieve data from the location object.

Whether you're building a simple single-page application or a complex multi-page application, these hooks can help you build more efficient and user-friendly navigation while also allowing you to easily pass and access data between routes.

In the course of this article, I will be using 2 different components for my illustration. The first component is the sending component (ProfileOne) and the other is the receiving component(ProfileTwo). I will be showing you the different ways you can achieve it.

useHistory()

• We will create a component called ProfileOne and define the data that you want to pass.

• Use the useHistory hook to push the new route and pass the state object as the second argument.

• In the receiving component, use the useLocation hook to access the state object and retrieve the passed data.

Note that by default the location variable have some key values in which we can use to achieve what we want.

pathname, search, hash, state, key

and in the course of this article, we will be using state as a prop the data you want to pass along when calling our hook.

import { useHistory } from "react-router-dom";

const ProfileOne = () => {
  const history = useHistory();
  const data = { name: "John", age: 30 };

  const handleClick = () => {
    history.push({ pathname: "/profile-two", state: data });
  };

  return <button onClick={handleClick}>Go to ProfileTwo</button>;
};

export default ProfileOne;

import { useLocation } from "react-router-dom";

const ProfileTwo = () => {
  const location = useLocation();
  const data = location.state;

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
    </div>
  );
};

export default ProfileTwo;

useNavigation
Same process except importing useNavigation instead of useHistory in step 2.

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

const ProfileOne = () => {
  const navigate = useNavigate();
  const data = { name: "John", age: 30 };

  const handleClick = () => {
    navigate("/profile-two", { state: data });
  };

  return <button onClick={handleClick}>Go to ProfileTwo</button>;
};

export default ProfileOne;

import { useLocation } from "react-router-dom";

const ProfileTwo = () => {
  const location = useLocation();
  const data = location.state;

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
      Hello
    </div>
  );
};

export default ProfileTwo;

Bonus point
You can also use Link element to pass data from one route to another by including the state prop inside of the Link element.

import { Link } from "react-router-dom";

const ProfileOne = () => {
  const data = { name: "John", age: 30 };

  return (
    <Link to="/profile-two" state={{ fromHome: { data } }}>
      Go to ProfileTwo
    </Link>
  );
};

export default ProfileOne;

fromHome indicate where the data is coming and you can decide to use any name of your choice.

import { useLocation } from "react-router-dom";

const ProfileTwo = () => {
  const location = useLocation();
  const { fromHome } = location.state;
  let data = fromHome.data;

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
    </div>
  );
};

export default ProfileTwo;

In conclusion, passing props and accessing data from one route to another is an essential part of building complex web applications with React. React Router provides several hooks, including useNavigation, useHistory, and useLocation, to help you navigate between routes and pass data along the way.

By mastering these hooks, you can build complex, interactive web applications that provide a seamless user experience. Whether you're building a simple blog or a full-fledged e-commerce site, React Router's navigation hooks provide the tools you need to build your app's navigation logic. So go ahead and start exploring these hooks to take your React applications to the next level!

Reference

https://ui.dev/react-router-pass-props-to-link
v5.reactrouter.com/core/api/Hooks/usehistory