передача массива между компонентами при переходе на другую страницу

Нужно передать массив games, находящийся в Layout.jsx, в файл AboutGames.jsx. Как это сделать, если компонент AboutGames должен отрисовываться тлько при нажатии game.name в компоненте Games?

Файловая структура

https://i.stack.imgur.com/RS7k9.png

Код Layout.jsx:

import React, { useState, useEffect } from "react";
import axios from "axios";
import Games from "./Games/Games.jsx";

export function Layout() {
  const [games, setGames] = useState([]);

  useEffect(() => {
    const API_KEY = "API_KEY";
    axios
      .get(`url?key=${API_KEY}`)
      .then((response) => {
        setGames(response.data.results);
      });
  }, []);
  return (
    <>
      <Games games={games}></Games>
    </>
  );
}

Код Games.jsx:

import React from "react";
import { Link } from "react-router-dom";
import styles from "./Games.module.css";
export default function Games({ games }) {
  return (
     <div className={styles.sections}>
       {games.map((game, index) => (
         <div className={styles.game}>
           <div className={styles.img_container}>
             <img
               src={game.background_image}
               className={styles.photo}
               key={index}
             />
           </div>
           <div className={styles.game_info}>
             <div className={styles.game_title}>
               <Link to="/about-game">{game.name}</Link>
             </div>
             <div className={styles.game_genre}>{game.released}</div>
           </div>
         </div>
       ))}
     </div>
   );
 }

Код App.jsx:

import { Layout } from "./components/Layout.jsx";
import { Routes, Route } from "react-router-dom";
import AboutGame from "./components/AboutGame.jsx";
export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}></Route>
      <Route path="/about-game" element={<AboutGame></AboutGame>}></Route>
    </Routes>
  );
}

Код AboutGame.jsx:

import React from "react";
export default function AboutGame() {
  return <h1>this is {games.name}</h1>; //Вот здесь и нужен массив

}


Ответы (0 шт):