передача массива между компонентами при переходе на другую страницу
Нужно передать массив 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>; //Вот здесь и нужен массив
}