У меня такой код:
import React, { Component } from 'react';
import '../styles/CountryDetails.css';
import { Link } from 'react-router-dom';
import { IconContext } from 'react-icons';
import { GoArrowRight } from 'react-icons/go';
import { FaPlane } from 'react-icons/fa';
class CountryDetails extends Component {
constructor(props) {
super(props);
this.state = {
countryData: props.countryData
}
}
render() {
console.log(this.state.countryData);
return (
<div>
<h1 className="display-3 text-center my-5">{this.state.countryData.countryClassification}</h1>
<div className="CountryDetail">
<div className="cards shadow-1 container">
<div className="row vertical-align">
<div className="col-2 text-center">
<IconContext.Provider value={{ color: '#A9A9A9', className: 'icon-hover icon-size'}}>
<div>
<FaPlane />
</div>
</IconContext.Provider>
</div>
<div className="col-8">
<h4>Airfare | Car Rental | Hotel Booking Site</h4>
{this.state.countryData.topAirfareCarRentalHotelBookingSite1 ? null : <span className="category-status">Under Construction...</span>}
</div>
<div className="col-2 text-center">
<IconContext.Provider value={{ className: 'show-hover icon-arrow-size'}}>
<div>
<GoArrowRight />
</div>
</IconContext.Provider>
</div>
</div>
<Link to={`/country/${this.state.countryData.countryAndTerriority}/topAirfareCarRentalHotelBookingSite1`} />
</div>
</div>
</div>
)
}
}
export default CountryDetails;
Вот что я получаю:
Прямо сейчас отображается моя URL-ссылка http://localhost:8080/country/Afghanistan/
. Когда я нажимаю на прямоугольник, я ожидаю, что моя URL-ссылка обновится до http://localhost:8080/country/Afghanistan/topAirfareCarRentalHotelBookingSite1
, и в нем будет отображаться другой компонент.
По какой-то причине я не могу сделать этот div интерактивным, и URL-адрес не меняется когда я нажимаю на нее. Я использую этот код
<Link to={`/country/${this.state.countryData.countryAndTerriority}/topAirfareCarRentalHotelBookingSite1`} />
неправильно или неправильно помещаю его?