Как сделать тег «div» интерактивным с помощью «Link» из «response-router-dom»? - PullRequest
0 голосов
/ 18 июня 2020

У меня такой код:

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;

Вот что я получаю:

enter image description here

Прямо сейчас отображается моя URL-ссылка http://localhost:8080/country/Afghanistan/. Когда я нажимаю на прямоугольник, я ожидаю, что моя URL-ссылка обновится до http://localhost:8080/country/Afghanistan/topAirfareCarRentalHotelBookingSite1, и в нем будет отображаться другой компонент.

По какой-то причине я не могу сделать этот div интерактивным, и URL-адрес не меняется когда я нажимаю на нее. Я использую этот код

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

неправильно или неправильно помещаю его?

Ответы [ 3 ]

2 голосов
/ 18 июня 2020

Ваш синтаксис кода неверен. Оберните тег div тегом Link

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

2 голосов
/ 18 июня 2020

вы пытались поместить div в ссылку?

<Link to = "yourURL" >
   <div></div>
</Link>
0 голосов
/ 18 июня 2020

В качестве альтернативы другим ответам вы можете использовать функциональный компонент и сделать что-то вроде этого:

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:

Я думаю, что это лучший подход в вашем случае, вам действительно не нужно состояние для этого компонента, потому что у вас уже есть реквизиты.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...