阵营路由器-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