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;

Answer 1

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;