Вложенные макеты

Макеты обеспечивают вложенный пользовательский интерфейс и обработку запросов (промежуточное ПО) для набора маршрутов:

• Общая обработка запросов: Достигается путем добавления метода onRequest;
• Общий пользовательский интерфейс: Достигается с помощью export default компонента Qwik.

Пример

Давайте соберем воедино все понятия, которые мы изучили до сих пор, чтобы создать полноценное приложение.

В предлагаемом примере у нас есть сайт с 2 страницами: https://example.com и https://example.com/about, и мы хотим добавить общие верхний и нижний колонтитулы ко всем страницам с единственным различием между страницами - контент в середине.

┌───────────────────────────────────────────────────┐
│ Заголовок                                         │
├─────────┬─────────────────────────────────────────┤
│ Меню    │ <Контент_текущего_маршрута>             │
│ - home  │                                         │
│ - about │                                         │
│         │                                         │
├─────────┴─────────────────────────────────────────┤
│ Подвал                                            │
└───────────────────────────────────────────────────┘

Сначала мы создаем три компонента: <Header>, <Footer> и <Menu>.

Разработчик может вручную вставить эти компоненты в каждый компонент страницы, но это дублирование, и приводит к ошибкам, вместо этого мы можем использовать макеты для автоматического повторного использования общих частей.

Каталог маршрутов

src/
├── components/
│   ├── header.tsx         # Реализация компонента заголовка
│   ├── footer.tsx         # Реализация компонента подвала
│   └── menu.tsx           # Реализация компонента меню
└── routes/
    ├── layout.tsx         # Реализация макета компонентами <Header>, <Footer>, и <Menu>
    ├── about/
    │   └── index.tsx      # https://example.com/about
    └── index.tsx          # https://example.com

src/routes/layout.tsx

Макет будет использоваться для всех маршрутов в каталоге src/routes. Он будет рендерить компоненты Header, Menu и Footer, а также отобразит вложенные маршруты под компонентом Slot.

import { component$, Slot } from '@builder.io/qwik';
 
export default component$(() => {
  return (
    <>
      <Header />
      <Menu />
      <Slot /> {/* <== Здесь будет контент маршрута */}
      <Footer />
    </>
  );
});

src/routes/index.tsx

Это основной маршрут для сайта. Он будет рендериться в слоте файла src/routes/layout.tsx, поэтому, даже если у него нет компонентов Header, Menu или Footer, он всё равно будет рендериться вместе с ними.

import { component$ } from '@builder.io/qwik';
 
export default component$(() => {
  return <>Home</>;
});

src/routes/about/index.tsx

Как и в случае с файлом src/routes/index.tsx, для маршрута about он будет выведен компонентом Slot в файле src/routes/layout.tsx, поэтому, даже если у него нет компонентов Header, Menu или Footer, он всё равно будет рендериться с ними.

import { component$ } from '@builder.io/qwik';
 
export default component$(() => {
  return <>About</>;
});

Когда мы запустим приложение, Qwik отобразит About, вложенный в RootLayout.

<RootLayout>
  <AboutPage />
</RootLayout>