React Router将内容插入到BaseLayout中

Question

我有一个单页React应用程序。我有一个BaseLayout组件作为应用程序的容器。的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') 
) 

所有导航是导航栏内部.js组件。

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> 


    ); 
    } 

} 

的问题是，当我去page_one或page_two URL它只显示的内容组件而不是导航栏。

如何使导航栏和页脚在使用反应路由器和反应框架的所有页面上可见？

UPDATE：

App.js

class App extends Component { 
    render() { 
    return (

     <div> 
     <BaseLayout> 

     </BaseLayout> 
     </div> 

    ); 
    } 
} 

export default App; 

我改变了我的index.js以下几点：

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') 
) 

现在，我得到如下：

和页面不会去任何地方，如果我用上面的代码：

Answer 1

我想你应该“提升”的App为根Route。
顺便说一句，是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，我不使用堆栈片断作为我不能使用反应路线与推状态在这里。

我张贴整个代码的情况下，该网址将在未来被打破：

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"));