陣營路由器-DOM V4，在鏈接的NavBar但在App.js

Question

路由我有反應路由器-DOM V4問題

當我點擊主頁/聯繫人鏈接在App.js它的工作的偉大，重定向到正確的路徑。

但是當我的NavBar點擊鏈接（NavLink到=「」）將其更改路徑，但不能造成新的組件

如何強制NavLink上點擊重新呈現新的組成部分？

App.js

export const App =() => { 
return(
    <div className="App"> 
    <NavBar /> 
    <div className='text-center'> 
     <div className='children'> 
      <Router> 
      <div className="container"> 
       <Link to="/">Home</Link> 
       <Link to= "/contact">Contact</Link> 
       <Link to= "/terms">Terms</Link> 
       <Route exact path= "/" component={Home} /> 
       <Route path= "/contact" component={Contact} /> 
       <Route path= "/terms" component={Terms} /> 
      </div> 
      </Router> 
     </div> 

     <Footer /> 

    </div> 
    </div> 
);} 
export default App; 

NavBar.js

class NavBar extends React.Component { 
render() { 
return (
    <nav className="navbar navbar-default horizontal-navbar"> 
      <a className="navbar-brand" href="#"> 
      <img className='horizontal-navbar-logo' src={Job2PersonLogo} /> 
      </a> 
     <div className="links-navbar-div"> 
      <Router> 
      <div className="btn-nav"> 
       <ul className="nav navbar-nav navbar-right"> 
       <li><NavLink to="/">Add Job</NavLink></li> 
       <li><NavLink to= "/#search">Search</NavLink></li> 
       <li><a href="/#how-it-works">How It Works</a></li> 
       <li><NavLink to= "/sign-in">Sign In</NavLink></li> 
       <li><NavLink to="/sing-up">Sign Up</NavLink></li> 

       </ul> 
      </div> 
      </Router> 
     </div> 
    </nav> 
)}} 
export default NavBar; 

index.js

render(<App />, document.getElementById('root')); 
registerServiceWorker(); 

Answer 1

你有的<Router />兩個實例，第一個在App.js和2中NavBar.js 。

在這種情況下，您的應用程序中應該只有一個路由器實例。

1刪除多餘<Router />從NavBar.js

NavBar.js

class NavBar extends React.Component { 
    render() { 
    return (
     <nav className="navbar navbar-default horizontal-navbar"> 
     <a className="navbar-brand" href="#"> 
      <img className="horizontal-navbar-logo" src={Job2PersonLogo} /> 
     </a> 
     <div className="links-navbar-div"> 
      <div className="btn-nav"> 
      <ul className="nav navbar-nav navbar-right"> 
       <li> 
       <NavLink to="/">Add Job</NavLink> 
       </li> 
       <li> 
       <NavLink to="/#search">Search</NavLink> 
       </li> 
       <li> 
       <a href="/#how-it-works">How It Works</a> 
       </li> 
       <li> 
       <NavLink to="/sign-in">Sign In</NavLink> 
       </li> 
       <li> 
       <NavLink to="/sing-up">Sign Up</NavLink> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </nav> 
    ); 
    } 
} 

export default NavBar; 

2請在App.js<Router />嫡系，如：

App.js

export const App =() => 
    <Router> 
    <div className="App"> 
     <NavBar /> 
     <div className="text-center"> 
     <div className="children"> 
      <div className="container"> 
      <Link to="/">Home</Link> 
      <Link to="/contact">Contact</Link> 
      <Link to="/terms">Terms</Link> 
      <Route exact path="/" component={Home} /> 
      <Route path="/contact" component={Contact} /> 
      <Route path="/terms" component={Terms} /> 
      </div> 
     </div> 

     <Footer /> 
     </div> 
    </div> 
    </Router>; 

export default App; 

我根據您的代碼創建了一個演示來複制此問題。您可以看到，當您單擊<Articles />鏈接時，<Navbar />組件內部的<NavLink />即使瀏覽器中的URL發生更改也不會處於活動狀態。

如果單擊內<Navbar />一個鏈接，<NavLink />活躍，但內容沒有更多<Articles />組件渲染，因爲我們有BrowserRouter兩個實例。

演示：https://codesandbox.io/s/lwqBO6r5

固定演示（一個BrowserRouter）：https://codesandbox.io/s/xkj1xKO6r