How to build the work of react components for certain routes?

Question

React

React app.
There is a layout: header, content, footer

There are several routes
/home
/page1
/page2

for each route, only the contet in the layout changes.

There is a requirement: for the /page1 route, add a form, and display the form submit button in the page header, displayed only on /page1.

The options that I see for myself:
1. Write logic for a specific route in the header
2. Remove the header from the layout and put it in each page of the route (home, page1, page2)

If the first option, then you get a strong connection and extra logic, and if the second , then code duplication.

How is this organized and resolved?

Answer 1

take react-router and don't reinvent your wheel.
in the header write your own logic for routes (in your case - <Route path="/page1"><Button /></Route>), in the content - your own.
Send the form programmatically by pressing this button, if the form itself is somewhere in content. You can do it in different ways - the easiest way is to put the data in the store.
Details depend on what is there and how you should work.