反应路由器更改 url 但不是组件 [已解决]

Question

When I click on the Navigation links the URL changes but the component doesn't render, and when I reload the page with the same link the component renders

APP.js

render() {
         return (
           <div>
             <BrowserRouter>
                <Switch>
                  <Route exact path="/" component={Main}  />
                  <Route path="/Men"component={DisplayPage} />
                </Switch>       
            </BrowserRouter>
          </div>
        )
    }

Nav.js

return (
      <div className="MainContainer">
        <header>
        
        <nav>
          <ul>
        
          <li><Title/></li>    
          <li><Link to='/Men'>MEN</Link></li>
          <li><a href>WOMEN</a></li>
          <li><a href>STYLEGUIDE</a></li>
          <li><a href>OUTLET</a></li>
          </ul>
        </nav>
      <Cart/>
   </header>
  </div>
);

Answer 1

Add the Nav component inside <BrowserRouter> :

return (
         <div>
           <BrowserRouter>
             <Nav />
             <Switch>
              <Route exact path="/" component={Main}  />
               <Route path="/Men"component={DisplayPage} />
              </Switch>    
           </BrowserRouter>
         </div>
    )

Answer 2

Can you try like this?

render() {
         return (
             <BrowserRouter>
              <Nav />
                <Switch>
                  <Route exact path="/" component={Main}  />
                  <Route exact path="/Men"component={DisplayPage} />
                </Switch>       
            </BrowserRouter>
        )
    }