How to pass data between pages in React with react-router-dom v6?

Question

I am trying to open a new page from the home page where the data is passed on clicking the item on the list. The code I have works for older versions of react-router-dom I believe. Can someone tell me how can I do the same thing in newer version of React? I need to display the ID and title in the new page.

I tried to follow the example here https://codesandbox.io/s/focused-wright-w8il9?file=/src/ViewUserDetails.js:354-377

The error says AppPage.js:15 Uncaught TypeError: Cannot read properties of null (reading 'DUMMY_DATA')

If there are any corrections otherwise too, please correct me. I'm new to this.

Thank You.

GridList.js

import React from "react";
import ReactDOM from "react-dom";
import { Link, useNavigate } from "react-router-dom";
import { Component } from "react";
import GridItem from "./GridItem";
import AppPage from "./AppPage";
import classes from "./GridList.module.css";
import App01 from "./app-01.png";
import App02 from "./app-02.png";

const GridList = (props) => {


const DUMMY_DATA = [
{
  title: "tic tac toe",
  id: 1,
  image: App01,
},
{
  title: "snake",
  id: 2,
  image: App02,
},
];

return (
<div className={classes.gridc1}>
  {DUMMY_DATA.map((item) => {
    return (
      <div key={item.id}>
        <Link
          to={{
            pathname: `/apppage/${item.id}`,
            state: { DUMMY_DATA: item },

            
          }}
        >
          <GridItem key={item.id} image={item.image} />
        </Link>
      </div>
    );
  })}
</div>
);
};

export default GridList;

AppPage.js

import React from "react";
import {ReactDOM, render } from "react-dom";
import { useLocation } from "react-router-dom";
import { Component } from "react";

const AppPage = _ => {

 const { state }= useLocation();

return (
<div>
  <p>{state.DUMMY_DATA.id}</p>
  <p>{state.DUMMY_DATA.title}</p>
</div>
);
};

export default AppPage;

Your code works pretty well for me. I forked your original example and put in your code. codesandbox.io/s/react-router-dynamic-link-forked-ddfw1?file=/… Let me know if you have fixed it. — Rohith Balaji
– Rohith Balaji, Commented Jan 26, 2022 at 2:19
hey yeah. it does work for react-router-dom v5, but doesn't work for v6. (you can check the package.json for more details). so if you can help me with something for v6, that's be great. i could go back to v5, but that'd mean i'd have change so much accordingly and that doesn't make sense. so any other solution would be appreciated. — Lohith Bollineni
– Lohith Bollineni, Commented Jan 27, 2022 at 16:53
Yeah, I just checked with v6. I think the versions of react react-dom and react-router-dom work only in specific combinations. Try deleting your node_modules and npm install @latest of these 3 deps. — Rohith Balaji
– Rohith Balaji, Commented Jan 28, 2022 at 13:05

Lohith Bollineni · Accepted Answer · 2022-01-30 05:23:49Z

I have solved this by following a documentation for upgrading to v6 react-router-dom and it finalllllly worked. Here it is: https://reactrouter.com/docs/en/v6/getting-started/tutorial

The solution was simple. I was just looking for a better documentation for upgrading from v5 to v6, I guess.

Also, I will attach the code if it's gonna help anybody here. (I have renamed a few things like 'DUMMY_DATA' to 'items' just for my convenience. The code would explain it clearly anyway ). If there are any doubts further, do comment and I'll try to reply! :)

GridList.js

    import React from "react";
    import ReactDOM from "react-dom";
    import { Link, useParams } from "react-router-dom";
    import { Component } from "react";
    import GridItem from "./GridItem";
    import AppPage from "./AppPage";
    import classes from "./GridList.module.css";
    import { getItems } from "./Data";

    let items = getItems();

    const GridList = (props) => {
      return (
        <div className={classes.gridc1}>
          {items.map((item) => {
            return (
              <div key={item.id}>
                <Link to={`/apppage/${item.id}`} key={item.id}>
                  <GridItem key={item.id} image={item.image} />
                </Link>
              </div>
            );
          })}
        </div>
      );
    };

    export default GridList;

Data.js

    import React from "react";
    import ReactDOM, { render } from "react-dom";
    import App01 from "./app-01.png";
    import App02 from "./app-02.png";

    let items = [
    {
        title: "tic tac toe",
        id: 1,
        image: App01,
    },
    {
        title: "bytes",
        id: 2,
        image: App02,
    },
    ];

    export function getItems() {
    return items;
    }

    export function getItem(id) {
        return items.find((item) => item.id === id);
    }

AppPage.js

    import React from "react";
    import ReactDOM, { render } from "react-dom";
    import { useParams } from "react-router-dom";
    import { Component } from "react";
    import { getItem } from "./Data";

    const AppPage = _ => {

      let params = useParams();
      let item = getItem(parseInt(params.id, 10));

      return (
        <div>
          <p ptitle = {item.title} />
          <p pid = {item.id}> />
        </div>
      );
    };

    export default AppPage;

Muhammet Akbulut · Accepted Answer · 2022-01-25 20:50:34Z

0

import React from "react";
import ReactDOM, { render } from "react-dom";
import Body from "../ui/Body";
import Head from "../ui/Head";
import Tail from "../ui/Tail";
import { useLocation } from "react-router-dom";
import { Component } from "react";

const AppPage = () => {
  //don't forget to use this, good luck :)
  const { state } = useLocation();
  return (
    <div>
      // and use "state", don't use static
      // what is static ?
      <p>{state.DUMMY_DATA.id}</p>
      <p>{state.DUMMY_DATA.title}</p>
    </div>
    );
};

export default AppPage;

answered Jan 25, 2022 at 20:50

Muhammet Akbulut

365 bronze badges

2 Comments

Lohith Bollineni Over a year ago

Hi! Sorry. Yes I meant the same. I typed it wrong on the post. I have corrected it now and it still throws the error. Lmk if you can help. Thank you.

Muhammet Akbulut Over a year ago

if write your errors, we can better help for you.

Collectives™ on Stack Overflow

How to pass data between pages in React with react-router-dom v6?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related