如何使用“react-router-dom”中的“Link”使“div”标签可点击？

Question

我有以下代码：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>这就是我得到的：现在，我的 URL 链接正在显示http://localhost:8080/country/Afghanistan/。当我单击矩形框时，我希望我的 URL 链接能够更新，http://localhost:8080/country/Afghanistan/topAirfareCarRentalHotelBookingSite1并且它会显示一个不同的组件。出于某种原因，我无法使这个 div 可点击，并且当我点击它时 URL 不会改变。我在使用这个代码吗<Link to={`/country/${this.state.countryData.countryAndTerriority}/topAirfareCarRentalHotelBookingSite1`} />错了还是放错了地方？

Answer 1

您是否尝试将 div 放在链接中？

<Link to = "yourURL" >

   <div></div>

</Link>

Answer 2

作为其他答案的替代方案，您可以使用功能组件并执行以下操作：

import React, { useCallback } from 'react'

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

export default ({ countryData }) => {

    const history = useHistory()

    const onClick = useCallback(() => {

        const to = `/country/${countryData?.countryAndTerriority}/topAirfareCarRentalHotelBookingSite1`

        history.push(to)

    },[countryData, history])

    return (

        <div onClick={onClick}>

            {'Your content here'}

        </div>

    )

}

编辑：

我认为这是您情况的最佳方法，您实际上并不需要此组件的状态，因为您已经拥有道具。

Answer 3

您的代码语法错误。用 Link 标签包裹 div 标签

<Link to ='...'><div>....</div></Link>