Как выстраивать работу компонентов реакт для определенных роутов?

Question

[Артур]

Приложение на реакте.
Есть лейаут: header, content, footer

Есть несколько роутов
/home
/page1
/page2

по каждому роуту меняется только contet в лейауте

Появляется требование: для роута /page1 добавить форму, а кнопку отправки формы вывести в header страницы отображающуюся только на /page1.

Варианты которые вижу для себя:
1. Писать логику для определенного роута в header
2. Выносить header из layout и заносить его в каждую страницу роута (home, page1, page2)

Если первый вариант, то получается сильная связанность и лишняя логика, а если второе, то дублирование кода.

Как такое организуется и решается?

Answer 1

[Robur]

возьмите react-router и не изобретайте свой велосипед.

в header пишете свою логику для роутов (в вашем случае -<Route path="/page1"><Button /></Route> ), в content - свою.

Форму отправляйте программно по нажатию этой кнопки, если сама форма где-то в content. Сделать можно по разному - проще всего данные в стор положить.

Детали зависят от того что там и как у вас должно работать.