リアクタールータBaseLayoutにコンテンツを挿入する

Question

私は1ページのReactアプリケーションを持っています。私は、アプリケーションのコンテナとして機能するBaseLayoutコンポーネントを持っています。

class App extends Component { 
    render() { 
    return (

     <div> 
     <BaseLayout> 

     </BaseLayout> 
     </div> 

    ); 
    } 
} 

たbaselayout

export default class BaseLayout extends Component { 

    render() { 
    return (
     <div> 
     <NavBar /> 
     {this.props.children} 
     <Footer /> 
     </div> 
    ) 
    } 

} 

index.js

ReactDOM.render(
    <BrowserRouter> 
    <Switch> 
     <Route path="/page_one" component={PageOne} /> 
     <Route path="/page_two" component={PageTwo} /> 
     <Route path="/" component={App} /> 
    </Switch> 
    </BrowserRouter>, 
    document.getElementById('root') 
) 

すべてのナビゲーションをナビゲーションバー内にある：以下のようにたbaselayoutは、ヘッダとフッタと、コンテンツを表示します.jsコンポーネント。問題は、私はURLをpage_oneかpage_twoに行くとき、それが唯一の内容を示すことである

navBar.js

export default class NavBar extends Component { 

    render() { 
    return (
     <div className="nav-bar"> 
     <button><Link to="/">Home</Link></button> 
     <button><Link to="/page_one">Page One</Link></button> 
     <button><Link to="/page_two">Page Two</Link></button> 
    </div> 
    ) 
    } 

} 

pageOne.jsとpageTwo.js

export default class PageOne extends Component { 

    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (

     <div> 
     <h1>Page One </h1> 
     </div> 


    ); 
    } 

} 

ナビゲーションバーではなくコンポーネントです。

リアクションルータとリアクションフレームワークを使用して、すべてのページでナビゲーションバーとフッタを表示させるにはどうすればよいですか？

はUPDATE：私は、次の取得、今

ReactDOM.render(
    <BrowserRouter> 
     <Route path="/" component={App}> 
      <Switch> 
       <Route path="/page_one" component={PageOne} /> 
       <Route path="/page_two" component={PageTwo} /> 
      </Switch> 
     </Route> 
    </BrowserRouter>, 
    document.getElementById('root') 
) 

：

App.js

class App extends Component { 
    render() { 
    return (

     <div> 
     <BaseLayout> 

     </BaseLayout> 
     </div> 

    ); 
    } 
} 

export default App; 

私を次のように私のindex.jsを変更しました

Answer 1

私はあなたが「リフト」ルートRouteとしてAppべきだと思います：

とページは、私は上記のコードを使用している場合はどこにも行きません。
ところで、AppはBaseLayoutと同じですか？あなたの例からは分かりません。
例：私はここにプッシュ状態と反応経路を使用することはできませんよう

const Index =() => { 
    return (
    <BrowserRouter> 
     <div> 
     <Route component={App} /> 
     <Switch> 
      <Route path="/page_one" component={PageOne} /> 
      <Route path="/page_two" component={PageTwo} /> 
     </Switch> 
     </div> 
    </BrowserRouter> 
); 
}; 

A running code example、私は、スタックスニペットを使用していませんよ。 App.js実装と

import React from "react"; 
import { render } from "react-dom"; 
import { BrowserRouter, Route, Link, Switch } from "react-router-dom"; 

const Footer =() => <div>Footer...</div>; 

class BaseLayout extends React.Component { 
    render() { 
    return (
     <div> 
     <NavBar /> 
     {this.props.children} 
     <hr/> 
     <Footer /> 
     </div> 
    ); 
    } 
} 

class NavBar extends React.Component { 
    render() { 
    return (
     <div className="nav-bar"> 
     <button> 
      <Link to="/">Home</Link> 
     </button> 
     <button> 
      <Link to="/page_one">Page One</Link> 
     </button> 
     <button> 
      <Link to="/page_two">Page Two</Link> 
     </button> 
     </div> 
    ); 
    } 
} 

const PageOne =() => <h1>Page One</h1>; 
const PageTwo =() => <h1>Page Two</h1>; 

class App extends React.Component { 
    render() { 
    return (
     <div> 
     <BaseLayout>{this.props.children}</BaseLayout> 
     </div> 
    ); 
    } 
} 

const Index =() => { 
    return (
    <BrowserRouter> 
     <div> 
     <Route component={App} /> 
     <Switch> 
      <Route path="/page_one" component={PageOne} /> 
      <Route path="/page_two" component={PageTwo} /> 
     </Switch> 
     </div> 
    </BrowserRouter> 
); 
}; 

render(<Index />, document.getElementById("root"));