React Router 6: Passing Data (States) through Links

This article shows you a concise and elegant approach to passing data through the Link component of React Router 6. You’ll also learn a simple technique to retrieve that passed data. We’ll write some code with modern features of React, including hooks and functional components. Without any further ado, let’s discover things that matter.

Overview

Passing Data

You can pass state via the Link component by making use of a prop named state, like this:

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

/* ... */

const myData = {
  name: 'Some thing',
  price: 123
}

/* ... */

<Link to="/some-where" state={myData}>Link Text</Link>

Retrieving Data

To get the data passed via the Link component, we use the useLocation hook, like this:

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

/*...*/

const location = useLocation();
const data = location.state;
console.log(data);

For more clarity, please see the end-to-end example below.

The Complete Example

App Preview

The React app we are going to make consists of 2 pages: HomePage and AboutPage. On HomePage, there are 2 Link components. Both of them are used to navigate from HomePage to AboutPage. However, the states that passed through them are different. Thereby, you will see 2 different results displayed on AboutPage corresponding to 2 Links.

Words might be boring and confusing. Here’s how our app works in action:

The Code

1. Create a new project:

npx create-react-app react-kindacode

The name is totally up to you.

2. Install the latest version of react-router-dom:

npm i react-router-dom

At the time of writing, the most recent version of react-router-dom is 6.2.1.

3. In the src directory, add 2 new files: HomePage.js and AboutPage.js. From now on, we will only care about these 3 files:

• App.js
• HomePage.js
• AboutPage.js

4. Add the following to HomePage.js:

// src/HomePage.js
import { Link } from "react-router-dom";

const HomePage = (props) => {
  // this is for the first Link
  const data1 = {
    from: "Link #1",
    message: "Welcome to KindaCode.com",
    timestamp: Date.now(),
  };

  // this is for the second Link
  const data2 = {
    from: "Link #2",
    message: "Just another message",
    timestamp: Date.now(),
  };

  return (
    <>
      <h1>Home Page</h1>
      <p>
        <Link to="/about" state={data1}>
          Go to About Page (Link #1)
        </Link>
      </p>
      <p>
        <Link to="/about" state={data2}>
          Go to About Page (Link #2)
        </Link>
      </p>
    </>
  );
};

export default HomePage;

5. Add the code below to AboutPage.js:

// src/AboutPage.js
import { useLocation, Link } from "react-router-dom";

const AboutPage = (props) => {
  const location = useLocation();
  const state = location.state;
  console.log(state);

  return (
    <>
      <h1>This is About page</h1>
      {state && (
        <div>
          <h3>Passed data:</h3>
          <p>From: {state.from}</p>
          <p>Message: {state.message}</p>
          <p>Timestamp: {state.timestamp}</p>
        </div>
      )}
      <hr />
      <Link to="/">Go Home</Link>
    </>
  );
};

export default AboutPage;

6. Wire up everything in App.js:

// App.js
import React from "react";

// import things from react-router-dom
import { BrowserRouter, Routes, Route } from "react-router-dom";

// import pages
import HomePage from "./HomePage";
import AboutPage from "./AboutPage";

function App() {
  return (
    <BrowserRouter>
      <div style={{padding: 30}}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Here’s my package.json:

{
  "name": "react-kindacode",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Conclusion

You’ve learned how to pass data through and retrieve data from the Link component of React Router 6. If you’d like to explore more new and interesting stuff about modern React and frontend development, take a look at the following articles:

• React + TypeScript: onMouseOver & onMouseOut events
• React + TypeScript: Re-render a Component on Window Resize
• React: Get the Width & Height of a dynamic Element
• React + TypeScript: Multiple Dynamic Checkboxes
• React: Show Image Preview before Uploading
• React Router: 3 Ways to Disable/Inactivate a Link

You can also check our React category page and React Native category page for the latest tutorials and examples.