How to handle multiple routers in react

If I understand your issue correctly, you can do that by nesting routes. Example assuming you use react-router 4.x.x: render Router or BrowserRouter etc. component (https://reacttraining.com/react-router/web/api/Router) once, at the top level, and then nest Route components. In your case you have main router in your index.js, so probably something like this:

<BrowserRouter>
   <Route path="/" exact component={Main} />
   <Route path="/some-page" component={SomePage} />
   <Route path="/admin" component={Admin} />
</BrowserRouter>

then, in your Admin component you don’t create another Router, instead just render Routes again, so something like this:

<div className="admin-panel-container">
  <AdminMenu />
  <Route path="/admin/users" component={AdminUsers} />
  <Route path="/admin/groups" component={AdminGroups} />
</div>

so when URL matches /admin you’ll see AdminMenu and component for a specific view in admin panel. You probably want to redirect from /admin to /admin/users or some dashboard, that depends on your specific application.

Now, if you have some layout elements surrounding your main router that you want to get rid of in admin routes, it’s hard to say more without seeing some code example, but I guess you could create two components, for example, Layout and AdminLayout, each containing menus, header etc. and accepting children, and use them in every route depending on if it’s admin or regular user route.