not the author - BUT in my CRA app, I put all my static route config and page config in routes.ts. routes.ts only imports from my router library. I specifically don't couple the page components in the route config because they need to be separate to prevent circular dependency problems. In the root of the app in React code, I have an object that maps each route to a page component, and it uses typescript which will ensure all routes have some page component.
Now anywhere in my app I can import the routes and have typesafe, no-circular dependency issues because of it
Each component is formed by a fragment with the various routes inside, this method does not work as the switch takes only the routes of the first component. How can I solve this malfunction?
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
out of curiosity, how could the routes be separated as in the image above? Many thanks in advance
Sure, Will write a separate post for it.
not the author - BUT in my CRA app, I put all my static route config and page config in routes.ts. routes.ts only imports from my router library. I specifically don't couple the page components in the route config because they need to be separate to prevent circular dependency problems. In the root of the app in React code, I have an object that maps each route to a page component, and it uses typescript which will ensure all routes have some page component.
Now anywhere in my app I can import the routes and have typesafe, no-circular dependency issues because of it
I did a test with 3 components:
1) PublicRoutes
2) AdminRoutes (only auth confirmed)
3) StoreRoutes (only store route)
Each component is formed by a fragment with the various routes inside, this method does not work as the switch takes only the routes of the first component. How can I solve this malfunction?