我有以下代码:
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`} />
错了还是放错地方了?
最佳答案
您是否尝试过将 div 放入链接中?
<Link to = "yourURL" >
<div></div>
</Link>
关于javascript - 如何使用 "div"中的 "Link"使 "react-router-dom"标签可点击?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62439040/