将 div 链接到 React 元素并传递道具

Question

I want to make it so when you click on a div it redirects you to another page, like react router but I have no knowledge to make it yet. Here is my code:

const Card: React.FC = ({ info }: any) => {
  return (
    <div className='card stacked featured'>
      <img src={info.links.mission_patch} className='card_image' alt='NO-IMAGE'/>
      <div className='card_content'>
        <h2 className="card_title">{info.mission_name}</h2>
        <p className='card_number'>Flight: {info.flight_number}</p>
        <p className='card_description'>{info.details}</p>
      </div>
    </div>
  )
}

Basically this is card, the data is from a web api. I want to make it so when I click on a card a whole new page shows with only that card data not other cards because they are iterated.

Answer 1

I suggest using useNavigate from react-router-dom. It is what I use for such things.

import { useNavigate } from 'react-router-dom'
 

const Card: React.FC = ({info}: any) => {
    const navigate = useNavigate()

    return (
        <div className='card stacked featured'>
          <img src={info.links.mission_patch} className='card_image' alt='NO-IMAGE'/>
          <div className='card_content' onClick={() => navigate("/toThePageYouWantToNavigateTo")>
            <h2 className="card_title">{info.mission_name}</h2>
            <p className='card_number'>Flight: {info.flight_number}</p>
            <p className='card_description'>{info.details}</p>
          </div>
          
        </div>
  )
}

Answer 2

Import and render the Link component from react-router-dom .

import { Link } from 'react-router-dom';

...

const Card: React.FC = ({ info }: any) => {
  return (
    <div className='card stacked featured'>
      <img src={info.links.mission_patch} className='card_image' alt='NO-IMAGE'/>
      <Link
        className='card_content'
        to={`"/mission/${info.id}`} // <-- this is path you want to link to
      >
        <h2 className="card_title">{info.mission_name}</h2>
        <p className='card_number'>Flight: {info.flight_number}</p>
        <p className='card_description'>{info.details}</p>
      </Link>
    </div>
  );
};

If you don't want to render an actual link/anchor tag into the DOM then import and use the useNavigate hook and add an onClick handler to the div element.

import { Link } from 'react-router-dom';

...

const Card: React.FC = ({ info }: any) => {
  const navigate = useNavigate();

  return (
    <div className='card stacked featured'>
      <img src={info.links.mission_patch} className='card_image' alt='NO-IMAGE'/>
      <div
        className='card_content'
        onClick={() => navigate(`"/mission/${info.id}`)} // <-- this is path you want to link to
      >
        <h2 className="card_title">{info.mission_name}</h2>
        <p className='card_number'>Flight: {info.flight_number}</p>
        <p className='card_description'>{info.details}</p>
      </div>
    </div>
  );
};