React Router 将内容插入 BaseLayout

Question

我有一个单页 React 应用程序。我有一个 BaseLayout 组件，它用作应用程序的容器。 BaseLayout 显示页眉和页脚以及如下所示的内容：

class App extends Component {
  render() {
    return (

      <div>
        <BaseLayout>

        </BaseLayout>
      </div>

    );
  }
}

基本布局

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

所有导航都在 navBar.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 时，它只显示组件的内容，而不是导航栏。

如何使用 react router 和 react framework 使导航栏和页脚在所有页面上可见？

更新：

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，我没有使用堆栈 sn-p，因为我不能在这里使用带有推送状态的 react-route。

我将发布整个代码以防万一网址将来被破坏：

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