React routing, multiple user roles best practices

I'm currently developing a web application to increase my productivity at work tenfold. Can't disclose the project as it would contain private company details however I can give a general overview. It's a web application that includes multiple user roles for creating some kind of content. There are three major stakeholders I'm focusing on - admins, content creators, and reviewers.

The project I'm developing is a MERN stack application with the API backend being hosted on the same server program as the front-end hosting (I plan to move to microservices and I'm developing the backend in anticipation of this). I'm trying to develop this application to be maintainable as it will most probably be me that has to maintain the app in the future. So with this in mind and the context out of the way, I'll explain my specifics.

I'm currently serving five separate routes for the frontend

1. /admin
2. /auth
3. /home
4. /reviewer
5. /creator

Each of these has a base pug file which is used to generate the header and the content is rendered using a react-router with a router per end-point. I've encountered a code smell and this is setting the href of the window within the render of a route based on the return value of a function. As the react-router stores the history, redirecting using the standard Redirect component from the react-router library isn't possible nor is pushing to the history state as a separate router is used for each endpoint.

Due to this, I have used a href redirect which clears the history which isn't the worst as most of the redirects are done from the auth route anyway which you probably don't want in your history anyway. Even with this, I'm just seeing potential future maintenance of feature problems such as switching between creator and reviewing roles based on dynamic state ect... I'm just trying to come up with an overarching structure for my project that is a little more maintainable and less 'hacky'. I may be completely overexaggerating and there is no problem with the redirect (if so post your reasons why) but I feel like I'm going against some design philosophy I just can't pinpoint which one. I've come up with one potential solution however I'm not sure on whether to implement it.

1. Create a main route handler and one endpoint for the frontend, within this main route handler convert the other routers to just switches and serve all user roles under one react-router.

This for some reason also feels wrong and the roles seem to have become more tightly coupled as well as introducing some security concerns for protected routes (I'm aware the backend data is still protected but the structure of the data will now be directly observable from within the react components which will be delivered under one route now). What do you think, do you have any alternatives? Give reasons for your approach any response will be greatly appreciated.