Question

当我单击“导航”链接时，URL会更改，但组件不会呈现，而当我使用相同的链接重新加载页面时，组件会呈现

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

在<BrowserRouter>内添加Nav组件：

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

Answer 2

你可以这样尝试吗？

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

反应路由器更改网址，但不更改组件[已解决]

2 个答案: