React 路由器，如何在布局中渲染组件（相对于独立）答案

【问题标题】：React router, How to render component within a layout (vs. stand alone)React 路由器，如何在布局中渲染组件（相对于独立）
【发布时间】：2025-12-11 14:30:01
【问题描述】：

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

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。非常有意义，因为我将所有路线都渲染到目标。

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

感谢任何建议。

【问题讨论】：

标签： reactjs meteor react-router react-router-v4

【解决方案1】：

要拥有一个通用的 Header、Footer 和其他 Layout，您需要做的就是拥有一个 Layout Component 并在其中定义 Routes 就像

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

【讨论】：

非常有帮助！谢谢！