In my react application, I need that the header should be rendered dynamically based on different pages.
I have a <Layout/>. Inside that I have <Sidebar/>, <Header/>, and <Content/>. My pages are wrapped by <Content/> as children.
I have a couple of pages that have their own needs. When I enter a particular page, a button and an input should appear in the <Header/> while only a button should appear on some other pages with different functionality. Those header inputs should be rendered as I enter that particular page.
Detailed information;
In my current code, every page needs different designs of the header. For instance; in A page there is a couple of buttons that depends on A page local or redux state. The same example for another page and they might need a search box which also depends on that particular page redux state.
How do I handle this so far?
When I enter a page, in a necessary lifecycle, I prepare a header by defining necessary JSX components (by passing the current state of the page) and with the help of a redux Action, I am keeping page-based things that are to be rendered in the header inside a redux state. Ever since the redux state updates, Header is also updated too and I get my page-specific header done.
I am looking for the best practice to accomplish this since keeping non-serializable content inside the redux state is not suggested and not a good practice.
Any suggestions would be appreciated.