Блог

На моей домашней странице есть несколько карточек, каждая из которых содержит некоторую информацию и кнопку чтения, поэтому, если пользователь нажимает кнопку, она должна быть направлена на новую страницу, чтобы прочитать детали внутри карты, но я не уверен, как этого добиться. Я попытался использовать react-router, но при нажатии на кнопку он отобразил новую страницу внутри моей домашней страницы. Пожалуйста, проведите меня через шаги, которые необходимо предпринять.

Используйте перехват useHistory из react-router-dom.

 import React from 'react';
import {useHistory} from 'react-router-dom';
import Card from './Components/Card.js';

// The parent component of "Card"
    const Home = () => {
       const history = useHistory();

       return (
         <div className="cards">
            <Card {...props} onClick={() => history.push('/path/to/article')} />
         </div>
       );
    }
 

Это компонент card:

     const Card = ({...props, onClick}) => {
        return (
           <div className="card" onClick={onClick}>
             ...
           </div>
        )
    }