Question

我有我的流星应用程序与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等）。似乎应该很简单，但是我似乎无法正确设置它。

感谢任何建议。

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，如何在布局内渲染组件（与独立的组件相比）

1 个答案: