如何使用“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" >&nbsp; &nbsp;<div></div></Link>

Answer 2

作为其他答案的替代方案，您可以使用功能组件并执行以下操作：import React, { useCallback } from 'react'import { useHistory } from 'react-router-dom'export default ({ countryData }) => {&nbsp; &nbsp; const history = useHistory()&nbsp; &nbsp; const onClick = useCallback(() => {&nbsp; &nbsp; &nbsp; &nbsp; const to = `/country/${countryData?.countryAndTerriority}/topAirfareCarRentalHotelBookingSite1`&nbsp; &nbsp; &nbsp; &nbsp; history.push(to)&nbsp; &nbsp; },[countryData, history])&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div onClick={onClick}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {'Your content here'}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}编辑：我认为这是您情况的最佳方法，您实际上并不需要此组件的状态，因为您已经拥有道具。

Answer 3

您的代码语法错误。用 Link 标签包裹 div 标签<Link to ='...'><div>....</div></Link>