title: React router v5 Route tag not rendering enclosed component
body: <p>I just started learning/working with react router and got stuck with the very basic stuff.
  If I am adding the <code>&lt;Route&gt;</code> , the enclosed component is not loading. Can anyone please help me on this. I even tried removing other components and just testing with route but then also it was not working</p>
  <p>index.js :</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import { Provider } from 'react-redux'
  import store from './store/store'
  import { BrowserRouter } from 'react-router-dom'
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
  
      &lt;BrowserRouter&gt;
        &lt;Provider store={store}&gt;
          &lt;App /&gt;
        &lt;/Provider&gt;
      &lt;/BrowserRouter&gt;
  
    &lt;/React.StrictMode &gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>App.js:</p>
  <pre><code>
  import './App.css';
  import 'bootstrap/dist/css/bootstrap.css';
  import 'bootstrap/dist/js/bootstrap.js';
  import Header from './components/Header';
  import ProductCard from './components/ProductCard';
  import ProductPage from './components/ProductPage';
  import Cart from './components/Cart';
  import { useSelector } from 'react-redux';
  import LoginForm from './components/LoginForm';
  import { useState, useEffect } from 'react';
  import { Route } from 'react-router-dom';
  
  
  function App() {
  
    const showCartOption = useSelector(state =&gt; state.cart.showCartOption);
    const isAuthenticated = useSelector(state =&gt; state.auth.isAuthenticated);
  
    return (
      &lt;div class=&quot;m-3 shadow p-2&quot;&gt;
        &lt;Header&gt;&lt;/Header&gt;
        &lt;div class=&quot;row&quot; &gt;
          {(isAuthenticated &amp;&amp; showCartOption) &amp;&amp;
            &lt;Route path=&quot;/products&quot;&gt;
              &lt;ProductPage /&gt;
            &lt;/Route&gt;}
          {(isAuthenticated &amp;&amp; !showCartOption) &amp;&amp;
            &lt;Route path=&quot;/cart&quot;&gt;
              &lt;Cart /&gt;
            &lt;/Route&gt;
          }
  
          {!isAuthenticated &amp;&amp; &lt;LoginForm&gt;&lt;/LoginForm&gt;}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>ProductPage.js:</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  import ProductCard from &quot;./ProductCard&quot;;
  
  
  
  function ProductPage() {
  
      const [products, setProducts] = useState([]);
  
      const productDescriptionLength = 75;
      const productTitleLength = 15;
  
      console.log(&quot;rendering : &quot;);
      console.log(products);
  
      useEffect(() =&gt; {
          console.log(&quot;fetching products&quot;);
  
          const productResponse = fetch('https://fakestoreapi.com/products')
              .then(res =&gt; {
                  return res.json();
              })
              .then(res =&gt; {
                  console.log(&quot;resolved response : &quot;);
                  console.log(res);
                  const translatedResponse = res.map(product =&gt; {
                      return {
                          productId: product.id,
                          productTitle: product.title.substring(0, productTitleLength) + &quot;...&quot;,
                          productPrice: product.price,
                          productDescription: product.description.substring(0, productDescriptionLength) + &quot;...&quot;,
                          productImage: product.image
                      }
                  })
  
                  return translatedResponse;
              })
              .then(res =&gt; {
                  console.log(res);
                  setProducts(res);
              });
  
      }, [])
  
      return (
          &lt;div className=&quot;row row-cols-1 row-cols-md-4 g-4&quot;&gt;
              {
                  products.length &gt; 0 &amp;&amp; products.map(product =&gt;
                      &lt;div class=&quot;col&quot;&gt;
                          &lt;ProductCard
                              productTitle={product.productTitle}
                              productPrice={product.productPrice}
                              productImage={product.productImage}
                              productDescription={product.productDescription}
                          /&gt;
                      &lt;/div&gt;
                  )
              }
          &lt;/div&gt;
      );
  }
  
  export default ProductPage;
  </code></pre>
  <p>cart.js:</p>
  <pre><code>
  import { useState } from &quot;react&quot;;
  import { useSelector } from &quot;react-redux&quot;;
  import CartCard from &quot;./CartCard&quot;;
  
  function Cart() {
  
      const cartItems = useSelector(state =&gt; state.cart.cartItems);
      console.log(&quot;cartItems : &quot;);
      console.log(cartItems);
  
      return (
          &lt;div class=&quot;&quot;&gt;
              {cartItems.length === 0 &amp;&amp; &lt;p class=&quot;m-5 text-center fs-1  shadow&quot;&gt;Your cart is empty. Happy Shopping !&lt;/p&gt;}
  
              {cartItems.length &gt; 0 &amp;&amp;
                  cartItems.map(cartItem =&gt; {
  
                      return &lt;CartCard
                          productTitle={cartItem.productTitle}
                          productPrice={cartItem.productPrice}
                          productDescription={cartItem.productDescription}&gt;
                      &lt;/CartCard&gt;
                  })
              }
  
          &lt;/div&gt;
      );
  }
  
  export default Cart;
  </code></pre>
  <p>I am able to see the navbar but none of the enclosed components in route<a href="https://i.stack.imgur.com/uMb2t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uMb2t.png" alt="enter image description here" /></a></p>