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