title: How to make "div" tag clickable with "Link" from "react-router-dom"?
body: <p>I have the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 (
              &lt;div&gt;
                  &lt;h1 className="display-3 text-center my-5"&gt;{this.state.countryData.countryClassification}&lt;/h1&gt;
                      &lt;div className="CountryDetail"&gt;
  
                          &lt;div className="cards shadow-1 container"&gt;
                              &lt;div className="row vertical-align"&gt;
                                  &lt;div className="col-2 text-center"&gt;
                                      &lt;IconContext.Provider value={{ color: '#A9A9A9', className: 'icon-hover icon-size'}}&gt;
                                          &lt;div&gt;
                                              &lt;FaPlane /&gt;
                                          &lt;/div&gt;
                                      &lt;/IconContext.Provider&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-8"&gt;
                                      &lt;h4&gt;Airfare | Car Rental | Hotel Booking Site&lt;/h4&gt;
                                      {this.state.countryData.topAirfareCarRentalHotelBookingSite1 ? null : &lt;span className="category-status"&gt;Under Construction...&lt;/span&gt;}
                                  &lt;/div&gt;
                                  &lt;div className="col-2 text-center"&gt;
                                      &lt;IconContext.Provider value={{ className: 'show-hover icon-arrow-size'}}&gt;
                                          &lt;div&gt;
                                              &lt;GoArrowRight /&gt;
                                          &lt;/div&gt;
                                      &lt;/IconContext.Provider&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;Link to={`/country/${this.state.countryData.countryAndTerriority}/topAirfareCarRentalHotelBookingSite1`} /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default CountryDetails;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what I get:</p>
  
  <p><a href="https://i.stack.imgur.com/imF0V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/imF0V.png" alt="enter image description here"></a></p>
  
  <p>Right now, my URL link is showing <code>http://localhost:8080/country/Afghanistan/</code>. When I click on the rectangle box, I expect my URL link to update to <code>http://localhost:8080/country/Afghanistan/topAirfareCarRentalHotelBookingSite1</code> and it will show up a different component.</p>
  
  <p>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</p>
  
  <pre><code>&lt;Link to={`/country/${this.state.countryData.countryAndTerriority}/topAirfareCarRentalHotelBookingSite1`} /&gt;
  </code></pre>
  
  <p>wrong or putting it in the wrong place?</p>