页面未路由到指定的路由

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;