title: Component not rendering after using <Link> though the URL gets changed
body: <p>I'm not expert in reactjs so I'm sorry if this problem seems trivial.</p>
  <p>I was ok with <code>&lt;a&gt;</code> tag as my components were rendering. Since I put <code>&lt;Link&gt;</code>, my components are not being rendered though the <code>URL</code> get changed. Any kind of help will be appreciated.</p>
  <p>Here is my current state.</p>
  <p><strong>App.js</strong></p>
  <pre><code>import { Container } from 'react-bootstrap';
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  import './bootstrap.min.css';
  import Footer from &quot;./components/Footer&quot;;
  import Header from &quot;./components/Header&quot;;
  import HomePage from './pages/HomePage';
  import ProductPage from './pages/ProductPage';
  
  function App() {
    return (
      &lt;Router&gt;
        &lt;Header /&gt;
        &lt;main&gt;
          &lt;Container className='py-3'&gt;
            &lt;Route path='/' component={HomePage} exact /&gt;
            &lt;Route path='/product/:id' component={ProductPage} /&gt;
          &lt;/Container&gt;
        &lt;/main&gt;
        &lt;Footer/&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>Product.js</strong></p>
  <pre><code>import React from 'react'
  import { Card } from 'react-bootstrap'
  import '../index.css'
  import Rating from './Rating'
  import { Link} from 'react-router-dom'
  
  function Product({product}) {
    return (
        &lt;Card className='my-3 p-3 rounded'&gt;
            &lt;Link to={`/product/${product._id}`}&gt;
                &lt;Card.Img src={ product.image}/&gt;
            &lt;/Link&gt;
  
            &lt;Card.Body&gt;
            &lt;Link to={`/product/${product._id}`}&gt;
               &lt;Card.Title as=&quot;div&quot;&gt;
                        &lt;strong&gt;{ product.name }&lt;/strong&gt;  
               &lt;/Card.Title&gt;
           &lt;/Link&gt;
                
                &lt;Card.Text as='div'&gt;
                    &lt;div className='my-3'&gt;
                        &lt;Rating value={product.rating} text={`${product.numReviews} reviews`} color={ '#fcfc03' }/&gt;
                    &lt;/div&gt;
                &lt;/Card.Text&gt;
                
                &lt;Card.Text as='h3'&gt;
                    ${ product.price}
                &lt;/Card.Text&gt;
            &lt;/Card.Body&gt;
        &lt;/Card&gt;
    )
  }
  
  export default Product
  </code></pre>
  <p><strong>Note that,</strong> Currently I'm using <strong>react-router-dom V5.2.0</strong></p>