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

Question

I am trying to pass a specific id of the card that I am clicking to another component to show the card it self in another page

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;

I want to pass an id of the card to the component where I am going to when I click on

Would you please tell me how to do that?!

Answer 1

You can pass id as parameter,

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

Now to receive on lyrics component, import useParams from react-router-dom

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

Now,

const { id } = useParams();