React router, Как визуализировать компонент в макете (по сравнению с автономным) - PullRequest
Новая
       29

React router, Как визуализировать компонент в макете (по сравнению с автономным)

0 голосов
/ 23 сентября 2018

У меня есть приложение-метеор, работающее с 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 и т. Д.).Похоже, что это должно быть просто, но я не могу настроить его правильно.

Ценю любой совет.

1 Ответ

0 голосов
/ 23 сентября 2018

Все, что вам нужно сделать, чтобы иметь общий заголовок, нижний колонтитул и другой макет, - это иметь компонент макета и определить маршруты внутри него, как 

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