[Solved]-Click on a card and then navigate to card page with details ,in react-Reactjs

I think you need react-router-dom
I recommend you learn it. Below is my implementation with router.

App.js

import {BrowserRouter as Router, Switch, Route} from "react-router-dom"
import Cars from "./Cars.js" // Change it to the correct path
import InfoCard from "./InforCard.js"

class App extends React.Component {
   render() {
       <Router>
          <Switch>
             <Route path="/cars" component={Cars}></Route>
              <Route path="/cars/:id" component={InfoCard} exact></Router>
          <Switch>
       </Router>
   }
}
export default App;

Cars.js

 class Cars extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            carData: null,
            checkData: false
        }
    }

    getData = () => {
        fetch('http://localhost:8000/api/all-articles')
        .then( (response) => response.json() )
        .then( (response) => {this.setState({
            carData : response,
            checkData : true
        })});
    }

    componentDidMount = () => {
        this.getData();
    }

    displayCars = () => {
        return(
            this.state.carData.data.map( (object, index) => (
                <CarCard key={index} name = {object.title} description={object.description} img={object.image} id={object.id}/>
            ) )
        );
    }

    render() {
        if(this.state.checkData){
            return(
                <div>
                    <Title/>
                    <div className="cars">
                    {this.displayCars()}
                    </div>
                </div>
            );
        }else {
            return(
                <div>Loading..</div>
            );
        }
    }
}

export default Cars;

CarCard.js

import { withRouter } from "react-router-dom"

class CarCard extends React.Component {
   render() {
        console.log(this.goToCardInfo(this.props.id));
        return(
            <div className="card">
                <Card>
                    <Card.Img variant="top" src = {`http://localhost:8000/images/${this.props.img}`}/>
                    <Card.Body>
                        <Card.Title>{this.props.name}</Card.Title>
                        <Card.Text>
                        {this.props.description}
                        </Card.Text>
                        <Button variant="primary" 
                                onClick={() => this.props.history.push("/card/" + this.props.id)}>See announce</Button>
                    </Card.Body>
                </Card>
            </div>
        );
    }
}

export default withRouter(CarCard);

InfoCard.js

class InfoCard extends React.Component {

    // you can get the id of the card like this
    const url = window.location.hash;
    const id = url.substring(url.lastIndexOf("/") + 1);
    // use that id to query your car
    render() {
        return(
            <h2>hello</h2>
        );
    }
}
export default InfoCard;