Как прокинуть props из page в layout в next.js 13?

Question

repcolding @repcolding

Next.js

Как прокинуть props из page в layout в next.js 13?

Всем привет! Как можно прокинуть в app/layout.tsx массив для хлебных крошек? И флаг для условного скрытия footer?

app/layout.tsx:

export interface IProps {
  children?: ReactNode
  breadcrumbs?: BreadcrumbsList | null
  hideFooter?: boolean
}

export default (props: IProps) => {
  const { hideFooter, breadcrumbs, children } = props

  return (
    <html lang='ru'>
      <body className={montserratFont.className}>
        <Header />

        {breadcrumbs && <Breadcrumbs list={breadcrumbs} />}

        {children}
        {!hideFooter && <Footer />}
      </body>
    </html>
  )
}

Помещать в каждую страницу отдельно не хочется

Вопрос задан более года назад
462 просмотра

5 комментариев

Подписаться 1 Простой 5 комментариев

szQocks @szQocks

ты хочешь прокинуть пропсы которые получает твоя страница в layout который её оборачивает ?) твоя идея явно плохая, раз ты решил поступить для решения своих проблем таким способом

ты же наверное знаешь что в нексте хок компоненты никто не отменял ?) то есть резервированные названия layout.tsx - это ни единственный layout в который может быть обёрнута страница

так же недавно я общался о хлебных крошках, почитай комментарии может что-то полезное там будет о том как реализовать хлебные крошки Как в Next.js 13 функцию fetch использовать в клиентском компоненте?

Написано более года назад
repcolding @repcolding Автор вопроса
szQocks, На счет хлебных крошек, спасибо! Я что-то внушил себе что им нужны данные с бека:

не нужно в хлебных крошках получать какие-то данные с сервера, компонент хлебных крошек должен отображает ссылки на основе адресного пути
+ https://nextjs.org/docs/app/api-reference/function... = Хлебные крошки :)

ты хочешь прокинуть пропсы которые получает твоя страница в layout который её оборачивает ?) твоя идея явно плохая, раз ты решил поступить для решения своих проблем таким способом
- Я уже это осознал))

ты же наверное знаешь что в нексте хок компоненты никто не отменял ?)
- Вы имели ввиду компонент обертку, которой можно оборачивать все страницы?:

export default () => { return ( <LayoutMain> I am page </LayoutMain> ) }

На данный момент у меня так :) Вы это имели ввиду, когда писали про компонент высшего порядка?
Написано более года назад
szQocks @szQocks

repcolding,

+ https://nextjs.org/docs/app/api-reference/function... = Хлебные крошки :)

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

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

Написано более года назад
repcolding @repcolding Автор вопроса

szQocks, Понял! Спасибо!

Написано более года назад
szQocks @szQocks
repcolding, точнее не создать массив в пару с useSelectedLayoutSegments а проверять свой массив хлебных крошек с использованием useSelectedLayoutSegments , но я проверял через usePathname хук

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

<html lang='ru'> <body className={montserratFont.className}> <Header /> {breadcrumbs && <Breadcrumbs list={breadcrumbs} />} <LayoutMain> {children} </LayoutMain> {!hideFooter && <Footer />} </body> </html>

можешь и хедер и хлебные крошки и футер, всё запихать в хок компонент, ну в общем удачи)
Написано более года назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Express.js

+1 ещё

Средний
Как скрыть ответ api от клиента?
- 1 подписчик
- вчера
- 54 просмотра
1

ответ
React

+1 ещё

Средний
Как запретить скролл вверх страницы после перехода не неё же только с query параметрами?
- 1 подписчик
- вчера
- 25 просмотров
0

ответов
React

+2 ещё

Простой
Как указать свой путь запроса на сервер react-admin?
- 1 подписчик
- 26 нояб.
- 27 просмотров
0

ответов
HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- 25 нояб.
- 82 просмотра
0

ответов
Next.js

Простой
Почему nextjs не видит пути через alias?
- 1 подписчик
- 24 нояб.
- 24 просмотра
0

ответов
Next.js

Простой
Как в next.js отловить ошибку?
- 1 подписчик
- 23 нояб.
- 36 просмотров
1

ответ
TypeScript

+1 ещё

Средний
Почему не работает валидации при установке значения в rect-hook-form?
- 1 подписчик
- 21 нояб.
- 38 просмотров
0

ответов
TypeScript

+1 ещё

Простой
React-hook-form как передать name в компонет?
- 1 подписчик
- 19 нояб.
- 47 просмотров
0

ответов
Next.js

Средний
Как реализовать аутентификацию с помощью Next.js и Express: хранение JWT и подписанные cookies?
- 1 подписчик
- 16 нояб.
- 47 просмотров
0

ответов
Next.js

Простой
Как сделать поля width и height к компонента Image необязательными?
- 1 подписчик
- 15 нояб.
- 32 просмотра
1

ответ
Показать ещё Загружается…

Python-разработчик

Налоги Онлайн

от 240 000 до 400 000 ₽

Тестировщик SberOs

Сбер • Санкт-Петербург

от 80 000 до 150 000 ₽

Ведущий разработчик / Backend-developer/ Golang (удаленно)

GymTeam

от 230 000 до 280 000 ₽

Провести CFD тестирование для оптимальной 3D

29 нояб. 2024, в 22:32

80000 руб./за проект

Настроить многостраничный Landing

29 нояб. 2024, в 22:07

5000 руб./за проект

Доработки реализованных telegram ботов на typescript + node.js

29 нояб. 2024, в 20:20

5000 руб./за проект

ты хочешь прокинуть пропсы которые получает твоя страница в layout который её оборачивает ?) твоя идея явно плохая, раз ты решил поступить для решения своих проблем таким способом

ты же наверное знаешь что в нексте хок компоненты никто не отменял ?) то есть резервированные названия layout.tsx - это ни единственный layout в который может быть обёрнута страница

так же недавно я общался о хлебных крошках, почитай комментарии может что-то полезное там будет о том как реализовать хлебные крошки Как в Next.js 13 функцию fetch использовать в клиентском компоненте?
szQocks, На счет хлебных крошек, спасибо! Я что-то внушил себе что им нужны данные с бека:

не нужно в хлебных крошках получать какие-то данные с сервера, компонент хлебных крошек должен отображает ссылки на основе адресного пути
+ https://nextjs.org/docs/app/api-reference/function... = Хлебные крошки :)

ты хочешь прокинуть пропсы которые получает твоя страница в layout который её оборачивает ?) твоя идея явно плохая, раз ты решил поступить для решения своих проблем таким способом
- Я уже это осознал))

ты же наверное знаешь что в нексте хок компоненты никто не отменял ?)
- Вы имели ввиду компонент обертку, которой можно оборачивать все страницы?:

export default () => { return ( <LayoutMain> I am page </LayoutMain> ) }

На данный момент у меня так :) Вы это имели ввиду, когда писали про компонент высшего порядка?
repcolding,

+ https://nextjs.org/docs/app/api-reference/function... = Хлебные крошки :)

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

когда писали про компонент высшего порядка?
да, но он тебе тут нужен будет если ток для того что бы
Помещать в каждую страницу отдельно не хочется
что-то помещать в каждую страницу и в одном месте, а не в каждой странице отдельно
repcolding, точнее не создать массив в пару с useSelectedLayoutSegments а проверять свой массив хлебных крошек с использованием useSelectedLayoutSegments , но я проверял через usePathname хук

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

<html lang='ru'> <body className={montserratFont.className}> <Header /> {breadcrumbs && <Breadcrumbs list={breadcrumbs} />} <LayoutMain> {children} </LayoutMain> {!hideFooter && <Footer />} </body> </html>

можешь и хедер и хлебные крошки и футер, всё запихать в хок компонент, ну в общем удачи)

Как прокинуть props из page в layout в next.js 13?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт