Tengo tres páginas aquí ( App.js - Button.js - Template.js )
Quiero que cuando el usuario haga clic en cada botón en Button.js , la página Template.js se abra con datos específicos de api (Aquí tengo una API artificial que contiene objetos, cada objeto contiene información específica sobre la moneda digital) Quiero cuando hago clic en por ejemplo, la página de plantilla de botón de bitcoin se muestra con información de bitcoin en ella
App.js
import { useState } from "react"; import Button from "./Button"; import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; import Template from "./Template"; const api = [ { id: 1, name: "bitcoin", abbr: "btc" }, { id: 2, name: "theter", abbr: "ttr" }, { id: 3, name: "ethereum", abbr: "eth" }, ]; export default function App() { return ( <BrowserRouter> <Routes> <Route path="/template" element={<Template data={api}/>} /> <Route path="/button" element={<Button data={api}/>} /> </Routes> </BrowserRouter> ); } Button.js
import React from "react"; import { Link } from "react-router-dom"; export default function Button(props) { console.log(props.data); return ( <div> {props.data.map((item) => { return ( <Link to={`/template`}> <button btn-id={item.id}> {item.name}deposit</button> </Link> ); })} </div> ); } Template.js
import React from "react"; export default function Template({ data }) { console.log(data); return ( <div> {/* name */} <h1>Lorem.</h1> {/* abbr */} <span>hasan</span> {/* id */} <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, consequatur. </p> </div> ); }Creo que quieres usar parámetros de URL.
https://v5.reactrouter.com/web/example/url-params
https://v5.reactrouter.com/web/api/Hooks/useparams
App.js
import { useState } from "react"; import Button from "./Button"; import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; import Template from "./Template"; const api = [ { id: 1, name: "bitcoin", abbr: "btc" }, { id: 2, name: "theter", abbr: "ttr" }, { id: 3, name: "ethereum", abbr: "eth" }, ]; export default function App() { return ( <BrowserRouter> <Routes> <Route path="/template/:id" element={<Template data={api}/>} /> <Route path="/button" element={<Button data={api}/>} /> </Routes> </BrowserRouter> ); } Button.js
import React from "react"; import { Link } from "react-router-dom"; export default function Button(props) { console.log(props.data); return ( <div> {props.data.map((item) => { return ( <Link to={`/template/${item.id}`}> <button btn-id={item.id}> {item.name}deposit</button> </Link> ); })} </div> ); } Template.js
import React from "react"; export default function Template({ data }) { console.log(data); const params = useParams(); const _data = data.find(({id}) => id === params.id) return ( <div> {/* name */} <h1>Lorem.</h1> {/* abbr */} <span>hasan</span> {/* id */} <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, consequatur. </p> </div> ); }