React router，如何在布局中呈现组件（与独立相比）

Question

我的流星应用程序与 React 和 React-Router 一起工作。我能够设置路线并正确渲染它们。我的问题是我想在布局（公共网格、菜单、header 等）内呈现一个组件。现在，任何路径都通过接管整个页面来呈现组件。

main.html

<head>
  <title>List App</title>
</head>

<body>
  <div id="target"></div>
</body>

main.coffee

browserHistory = createBrowserHistory()

export renderRoutes = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route exact path='/' component={App} />
      <Route path="/mylists" component={MyLists} />
      <Route path="/list/:listId" component={List} />
      <Route path="/layout" component={Layout} />
      <Route exact path="/discover" component={Browse} />
      <Route component={NotFoundPage} />
    </Switch>
  </Router>
)

Meteor.startup () ->
  console.log "Hello from Client."
  render(renderRoutes(), document.getElementById('target'))

导航到路由时（即 path='/'），浏览器仅显示单个组件，在本例中为 App。非常有意义，因为我正在渲染所有目标路线。

我希望我的路由在另一个组件内部渲染。例如，我有一个带有导航、徽标等的布局组件。一旦用户点击路线，我只想在布局内呈现该组件（即 MyLists、浏览等）。看起来应该很简单，但我似乎无法正确设置它。

感谢任何建议。

Answer 1

要拥有一个通用的页眉、页脚和其他布局，您需要做的就是拥有一个布局组件并在其中定义路由，例如

browserHistory = createBrowserHistory()

export renderRoutes = () => (
  <Router history={browserHistory}>
     <Route component={LayoutComponent} />
  </Router>
)

const LayoutComponent = (props) => {
    <div>
        <Header />
        {/* other data */}
        <Switch>
          <Route exact path='/' component={App} />
          <Route path="/mylists" component={MyLists} />
          <Route path="/list/:listId" component={List} />
          <Route path="/layout" component={Layout} />
          <Route exact path="/discover" component={Browse} />
          <Route component={NotFoundPage} />
        </Switch>
        <Footer />
    </div>

}

Meteor.startup () ->
  console.log "Hello from Client."
  render(renderRoutes(), document.getElementById('target'))

React router，如何在布局中呈现组件（与独立相比）

React router, How to render component within a layout (vs. stand alone)

meteor

reactjs

react-router

react-router-v4