можно ли поместить элемент «перед» компонентом макета?

Представьте, что у меня есть каталог приложения, внутри которого находятся файлы page.tsx и layout.tsx. Я установил верхний и нижний колонтитулы в layout.tsx, которые будут отображаться на каждом маршруте, а между ними есть

      <main>{children}</main>

Но только для домашней страницы (маршрут «/») я хочу отображать div «перед» заголовком. Я не хочу, чтобы этот div отображался на других маршрутах, таких как /about. Что я должен делать? Если я помещу этот div в page.tsx, который находится внутри каталога приложения, он будет отображаться между верхним и нижним колонтитулами. И, определив разные макеты для других папок внутри каталога приложения, я могу добавить что-то только к корневому макету. Но что я на самом деле хочу сделать здесь, так это вычесть что-то (этот div перед заголовком) из корневого макета для других маршрутов.

Источник

1 ответ

Вдохновленный ответом @Zain_UI_Din, который не будет работать при использовании нового/appкаталог. Я считаю, что вы можете сделать что-то подобное вlayout.tsx, но я думаю, что вы должны сделать его клиентским компонентом, потому что вы используете маршрутизатор.

      'use client'; // not sure if needed
import { useRouter } from 'next/router';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();

  return (
    <html lang="en">
      <body>
        {router.pathname === '/' && (
          <div>Home page</div>
        )}
        <header>header content</header>
        <main>{children}</main>
        <footer>footer content</footer>
      </body>
    </html>
  );
}

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

Источник
Другие вопросы по тегам