react-router：NavLinkを挿入するとDOM全体が消える

Question

私は反応して、反応ルータを使ってWebアプリケーションのナビゲーションを管理しようとしています。 私のDOM全体が消えているので、私は間違ったことをしているに違いありません。すべての私は、ルータに設定しながら、罰金：

Container.js

import React, {Component} from 'react'; 
import SideBar from "./sidebar/SideBar"; 
import Pagina from "./content/Pagina"; 
import { 
    BrowserRouter as Router, 
    NavLink 
} from 'react-router-dom' 
import NavRoutes from "./NavRoutes"; 

class Container extends Component { 
    render() { 
     return (
      <div id="MyLearningContainer" className ="container-fluid"> 
       <SideBar/> 
       <Pagina/> 
       <Router> 
        {NavRoutes} 
       </Router> 
      </div> 
     ); 
    } 
} 


export default Container; 

を、私は私のSideBarItemは<NavLink>その内側を発生させる際に問題が発生NavRoutes.js

import React from 'react'; 
import { 
    Route 
} from 'react-router-dom'; 

import Dashboard from "./content/Dashboard"; 
import Utenti from "./content/Utenti"; 

const navRoutes = (
    <Route path="/" component= {Dashboard}> 
     <Route path="utenti" component = {Utenti} /> 
    </Route> 
); 

export default navRoutes; 

通常<li>：

SideBarItem.js

import React, {Component} from 'react'; 
import { 
    NavLink 
} from 'react-router-dom' 


const defaultClass = { 
    color: '#00338D', 
    paddingTop: 10, 
    paddingBottom: 10, 
    paddingLeft: 20, 
    paddingRight: 20 
}; 

const activeClass = { 
    color: '#fff', 
    backgroundColor: '#428bca', 
    paddingTop: 10, 
    paddingBottom: 10, 
    paddingLeft: 20, 
    paddingRight: 20 
}; 

class SideBarItem extends Component { 
    render() { 
     return (
      <li> 
       <NavLink to={("/" + this.props.title).toLowerCase()}> 
        <span className={this.props.glyph}></span> {this.props.title} 
       </NavLink> 
      </li> 
     ); 
    } 
} 

SideBarItem.defaultProps = { 
    title: 'Undefined', 
    glyph: 'glyphicon-home' 
} 


export default SideBarItem; 

私はこれを保存すると、全体のDOMはちょうど消え、何ももはやレンダリングされなかっます！

---

更新

サイドバーは現在、ルータの子になるように、私はContainer.jsを編集しました。

class Container extends Component { 
    render() { 
     return (
      <div id="MyLearningContainer" className="container-fluid"> 
       <Router> 
        <div> 
         <SideBar/> 
         {NavRoutes} 
        </div> 
       </Router> 
      </div> 
     ); 
    } 
} 

今DOMはうまくレンダリングしますが、NavLinkをクリックすると、ルート変更をすることはありません。私は、ルータの作業を取得するために管理し、それはダッシュボードの上にとどまる...

Answer 1

！

thenormormquidのアドバイスに従って、SideBarがRouterの子になるようにContainer.jsを編集しました。

次に、右のリンクを指していなかったNavRoutes.jsを編集しました。

import React from 'react'; 
import { 
    Route 
} from 'react-router-dom'; 

import Dashboard from "./content/Dashboard"; 
import Utenti from "./content/Utenti"; 

const navRoutes = (
    <div> 
     <Route path="/dashboard" component= {Dashboard}/> 
     <Route path="/utenti" component = {Utenti} /> 
     <Route path="/corsi" component = {Corsi} /> 
    </div> 
); 

export default navRoutes; 

サイドバーのリンクをクリックすると、すべて正常に動作し、ページが変更されます。