Страница не идет по указанному маршруту

Question

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

import React from 'react';
import '../App.css';
import shirtData from '../shirtData';
import ShirtContainer from './ShirtContainer';
import ShoppingCart from './ShoppingCart';
import ShoppingCartIcon from './ShoppingCartIcon';
import { Switch, Route } from 'react-router-dom'


 class App extends React.Component {

    state = {
    shirts: shirtData,
    shoppingCart: [],
    shirtQuantity: 0
 }

  handleQuantity = () => {
     this.setState({
      shirtQuantity: this.state.shirtQuantity + 1
     })
   }

    handleAddtoCart = (shirts) => {
        console.log(shirts)

     }


   render(){
      return (
         <div>

        <div className="fire">
           <h1 className="Blazing">T-Shirt Paluzza</h1>
         </div>

       <ShirtContainer
         shirts={this.state.shirts}
          handleAddtoCart={this.handleAddtoCart}
        />
        <Switch>
          <Route path="/shopping-cart" render={(routerProps) =>   
     <ShoppingCart shoppingCart={this.state.shoppingCart} shirts=

      {this.state.shirts} {...routerProps} />} />
                </Switch>

  <ShoppingCartIcon
        shirts={this.state.shirts}
  />

  </div>
)

       }

       }

   export default App;


   import React from 'react'
   import { Link } from 'react-router-dom'

   const ShoppingCartIcon = (props) => {

   return(
       <div className="cartButton">
       <Link to="/shopping-cart">Cart ({0})</Link>
        </div>
      )


       }
        export default ShoppingCartIcon;