私はApp.jsホーム/連絡先のリンクをクリックすると、私は、それは素晴らしい働いて反応し、ルータのDOM V4</p> <p>に問題があり、V4-ルータのDOMリアクトナビゲーションバーのリンクが、App.js

Question

にルーティング正しいパスにリダイレクトします。

しかし、私はナビゲーションバーのリンク（=「」へ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

あなたはNavBar.jsにApp.jsし、第二に<Router />の2つのインスタンス、第一を持っています。

この場合、アプリケーションにはRouterのインスタンスが1つだけ必要です。

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 />リンクをクリックすると、ブラウザのURLが変更されても<Navbar />コンポーネント内の<NavLink />コンポーネントはアクティブではないことがわかります。

<Navbar />内のリンクをクリックすると、の2つのインスタンスがあるため、コンポーネントには<NavLink />がアクティブになっていますが、コンテンツはもう表示されません。

デモ：https://codesandbox.io/s/lwqBO6r5

固定デモ（1 BrowserRouter付き）：https://codesandbox.io/s/xkj1xKO6r