React Router 6: Passing Data (States) through Links

Last updated on January 12, 2022 A Goodman Loading... One comment

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:

// 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:

// 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": {
    "@mui/material": "^5.2.8",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-device-detect": "^2.1.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"
  },
  "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:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
1 Comment
Inline Feedbacks
View all comments
Meysam
Meysam
1 month ago

thank you very much

Related Articles