Javascript 单击React.js将数据传递给另一个组件

我正在尝试将我正在单击的卡的特定id传递给另一个组件，以在另一个页面中显示该卡本身

import useFetchData from "./useFetchData";
import { Card,Row,Col, Container,CardGroup,Button } from 'react-bootstrap';
import { Link } from "react-router-dom/cjs/react-router-dom.min"
import Lyrics from "./LyricsFinder";


const Tracks = () => {

const {data,Load}=useFetchData();

return ( 
    <Container>
                {Load && <div>Loading...</div>} 
        {!Load && <h2 style={{ textAlign:"center",marginBottom:"25px" }} >Top 5 songs on the Bilboard this weak</h2>}
    <div className="tracks">
        <CardGroup>
        {data.map(info =>(
                    <div key={info.track.track_id}>
           <Card style={{ width: '30rem' }} key={info.track.track_id}>
            <Card.Body>
            <Card.Title>{info.track.track_name}</Card.Title>
            <Card.Text>  {info.track.artist_name} </Card.Text>
            </Card.Body>
            <Card.Footer variant="mx-auto ">
                 <Link to="/lyrics" className="btn btn-primary">Sign up</Link> // here where I want to click
       
            </Card.Footer>
            
            </Card>
        </div>
         ))
        }</CardGroup>
    </div>
    </Container>
     );
     }

  export default Tracks;

从“/useFetchData”导入useFetchData；
从“react bootstrap”导入{Card、Row、Col、Container、CardGroup、Button}；
从“react router dom/cjs/react router dom.min”导入{Link}
从“/LyricsFinder”导入歌词；
常数轨道=（）=>{
const{data，Load}=useFetchData（）；
报税表（
{Load&&Load…}
{！加载&&双板上的前5首歌曲此弱}
{data.map（信息=>(
{info.track.track_name}
{info.track.artist_name}
在这里注册//我要单击的位置
))
}
);
}
导出默认轨迹；

我想在单击时将卡的id传递给我要去的组件

---

你能告诉我怎么做吗

您可以将id作为参数传递

<Link to={'/lyrics/' + id} className="btn btn-primary">Sign up</Link>

现在,

---

通过道具传递

id

，将

id

保存在状态中，并使用

onClick

handler更新它如何在中传递道具？？参考您是否将路径上的参数设置为routes？？路径：“/歌词/：id”非常感谢！！！这个解决方案有效吗？？

import { useParams } from "react-router-dom";

const { id } = useParams();