React Router 4編成ルート

Question

私は現在、ルータ4を使って最初のReactアプリで経路を整理しようとしています。Navbarがページ上に残り、Navbarなしでいくつかのコンポーネントを開く（表示する）ことです。 すべてのコンポーネントをNavBarコンテナの下に表示するという考えから始めましたが、うまくいきましたが、リンクされたコンポーネントをNavbarなしで同じウィンドウに開くリンクを追加する必要があります。 誰かがそのようなルーティングを設定する方法を知っているかもしれません。

私の現在のコード：あなたはその後、NAVとそうでないものがありますMainセクションにあなたのルートを分割する必要が

render() { 

    return (
    <BrowserRouter>  
     <div className="App"> 
     <div className="App-header"> 
     <h2>{this.state.title}</h2> 
     <NavBar></NavBar> 
     </div> 
      <Switch> 
       <Route exact path = "/" component = {Home} /> 
       <Route exact path = "/about" component = {About} /> 
       <Route exact path = "/register" component = {RegForm} /> 
      </Switch>  
     <footer className = "Footer"><Content /></footer> 
     </div> 
    </BrowserRouter> 
    ); 

    } 

Answer 1

：

render() { 
    return (
     <BrowserRouter> 
      <Switch> 
       <Route path="/page-outside-nav" component={OutsideNav} /> 
       <Route path="/" component={Main} /> 
      </Switch> 
     </BrowserRouter> 
    ); 
} 

const Main =() => (
    <div className="App"> 
     <div className="App-header"> 
      <h2>{this.state.title}</h2> 
      <NavBar></NavBar> 
     </div> 
     <Switch> 
      <Route exact path = "/" component = {Home} /> 
      <Route exact path = "/about" component = {About} /> 
      <Route exact path = "/register" component = {RegForm} /> 
     </Switch> 
     <footer className = "Footer"><Content /></footer> 
    </div> 
); 

スイッチを中にあなたのメインAppは、まずナビの外に存在するはずのルートにマッチさせようとします。一致するものが見つからない場合は、<Route path="/" component={Main} />と一致することでメインに落ちます。 Mainは、それ自身のSwitchを持っていなければなりません。