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

Question

I have the following code:

 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;

This is what I get:

Right now, my URL link is showing http://localhost:8080/country/Afghanistan/ . When I click on the rectangle box, I expect my URL link to update to http://localhost:8080/country/Afghanistan/topAirfareCarRentalHotelBookingSite1 and it will show up a different component.

For some reason, I cannot make this div clickable and the URL does not change when I click on it. Am I using this code

<Link to={`/country/${this.state.countryData.countryAndTerriority}/topAirfareCarRentalHotelBookingSite1`} />

wrong or putting it in the wrong place?

Answer 1

have you tried to put the div inside the link?

<Link to = "yourURL" >
   <div></div>
</Link>

Answer 2

Your code syntax is wrong. Wrap the div tag with the Link tag

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

Answer 3

As an alternative to the other answers, you can use a functional component and do something like this:

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>
    )

}

EDIT:

I think this is the best approach in your case, you don't really need a state for this component, because you already have the props.

Answer 4

I used this part of code:

<Link to = "yourURL" >
<div></div>
</Link>

It looks like Link is disableing that div styles. (As user Beast mentioned right above here in comments.) In my case div was empty only with bg so setting up div height: 100% solved the problem.