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

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

Вопрос задан 17 авг. 2023
336 просмотров

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

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

szQocks @szQocks

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

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

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

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

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

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

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

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

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

repcolding,

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

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

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

Написано 17 авг. 2023
repcolding @repcolding Автор вопроса

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

Написано 17 авг. 2023
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>

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

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

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

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

Войти через центр авторизации

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

React

+3 ещё

Средний
Как получить Http only cookie в middleware Nextjs 14?
- 1 подписчик
- 20 июн.
- 78 просмотров
0

ответов
Next.js

Простой
Обновление состояния в Next js по событию?
- 1 подписчик
- 16 июн.
- 35 просмотров
0

ответов
Next.js

Простой
Как реализовать аутентификацию в nextjs?
- 1 подписчик
- 12 июн.
- 37 просмотров
1

ответ
Next.js

Простой
Где в Next JS Билд всего проекта находится?
- 1 подписчик
- 11 июн.
- 69 просмотров
0

ответов
Next.js

Средний
Как передать данные из дочерней функции в родительскую используя атрибут action в Server Actions next.js 14?
- 1 подписчик
- 10 июн.
- 9 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как правильно ловить ошибки в Next.js + Axios?
- 1 подписчик
- 30 мая
- 78 просмотров
1

ответ
Next.js

Средний
Стоит ли скрыть backend части T3 stack (next.js) приложения, обеспечивая безопасность?
- 1 подписчик
- 29 мая
- 76 просмотров
1

ответ
Next.js

Простой
Как правильно выводить данные в Next.js по кнопке?
- 1 подписчик
- 28 мая
- 61 просмотр
2

ответа
Next.js

Простой
Статические файлы в некст?
- 1 подписчик
- 26 мая
- 23 просмотра
0

ответов
Next.js

+1 ещё

Простой
Как обработать логику авторизации пользователя?
- 1 подписчик
- 18 мая
- 28 просмотров
0

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

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

Газпром добыча Иркутск • Иркутск

от 100 000 до 180 000 ₽

Customer Care Manager

Forsa Recruiting • Москва

от 800 до 1 500 $

CRM-manager (Sportsbook)

Forsa Recruiting • Москва

от 1 300 до 2 000 $

Разработать телеграм бота для приюта для бездомных животных

26 июн. 2024, в 08:33

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

Аудит кода на javascript

26 июн. 2024, в 02:23

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

Бот для просмотра историй

26 июн. 2024, в 00:28

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?

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

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

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