Как прокинуть 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>
  )
}

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

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

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>

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

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

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

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

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

JavaScript

+2 ещё

Средний
Почему addItem передает пустое значение?
- 2 подписчика
- 15 янв.
- 359 просмотров
0

ответов
Next.js

Средний
Как решить проблему с неправильными стилями в app router?
- 1 подписчик
- 11 янв.
- 28 просмотров
0

ответов
Next.js

Простой
Как изменить константу в файле после сборки приложения?
- 1 подписчик
- 27 дек. 2024
- 23 просмотра
1

ответ
Next.js

Средний
Как загрузить файл в Next.js?
- 1 подписчик
- 24 дек. 2024
- 20 просмотров
0

ответов
Next.js

Простой
Как удалять пользователя из бд, когда у него заканчивается время работы токена?
- 1 подписчик
- 20 дек. 2024
- 43 просмотра
1

ответ
Next.js

Простой
Почему пользователь не записывается в db?
- 1 подписчик
- 18 дек. 2024
- 86 просмотров
0

ответов
Next.js

Простой
Как отменить переход в Link NextJS по клику во вложенном элементе?
- 1 подписчик
- 15 дек. 2024
- 16 просмотров
0

ответов
Next.js

Средний
Как сделать модальное окно на nextjs с помощью параллельных роутов, которое не закрывается при перезагрузке?
- 1 подписчик
- 09 дек. 2024
- 84 просмотра
1

ответ
Express.js

+1 ещё

Простой
Как хранить настройки сайта?
- 1 подписчик
- 09 дек. 2024
- 205 просмотров
2

ответа
Steam

+1 ещё

Простой
Есть ли способы сделать авторизацию через Steam, используя Next или какие-то дополнительные библиотеки?
- 1 подписчик
- 08 дек. 2024
- 71 просмотр
0

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

Инженер по тестированию ПО / Тестировщик

Living Core

от 80 000 ₽

Менеджер по развитию ключевых клиентов (ИТ-проекты, B2B)

Eltex • Новосибирск

от 80 000 ₽

QA Engineer Manual

Vorta

от 40 000 до 65 000 ₽

Контекстная реклама

18 янв. 2025, в 10:04

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

Адаптивная верстка лендинга

18 янв. 2025, в 09:18

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

Лендинг

18 янв. 2025, в 07:20

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

ты хочешь прокинуть пропсы которые получает твоя страница в 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?

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

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

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