I have a react application which is capable to create and manage 4 different type of config files.
Each with their on set of keys and possible values.
in my App.jsx I have a custom layout component with header, side navigation, footer and a <Switch> defined from react-router-dom with different Routes to the corresponding overview and editor pages for the different config files. As well as some routes to more general pages like /home or /404. The <Switch> defines which content gets rendered in the body of the layout component.
A potential client wants to use the application but needs only to manage 2 config files of the 4 available.
I'm looking for an elegant way to introduce some sort of properties file into the application in which I can configure which sites are available and which are not.
I want to avoid copying the existing codebase and deleting everything I don't need for the client, resulting in me being forced to apply bugfixes or patches on two repos/codebases.
One approach would be to introduce conditional rendering to the different navigation links and introduce a custom hook which redirects to /404 when trying to access a disabled site. But I feel this approach can get messy quick and scales bad.
I'm looking for guides, tutorials, experiences or ideas on how to split up and ship parts of an existing react application.
Thanks in advance :)
If this is not the right place to ask, please redirect me in the right direction