How to fix a bug in react-router ??

Question

React

The situation is as follows: there is a root Switch with routes to pages, it has a Route Home in which there is a built-in switch in order to render nested pages in it.
ROOT SWITCH

<Switch>
Route exact path={'/'} component={Home} />
Route path={'/profile'} component={Profile}  />
Route path={'/auth'} component={Auth}  />
Route path={'/auth/login'} component={Login}  />
Route path={'/auth/register'} component={Register}  />
Route path={'/terms'} component={Terms}  />
Route path={'/inbox'} component={Inbox}  />
Route component={NotFound} />
</Switch>

Home SWITCH

< Header/>
<Switch>
<Route path={'/'} component={Latest} />
<Route path={'/users/:id'} component={User}  />
<Route path={'/product/:id'} component={Product}  />
<Route path={'/search'} component={Search} />
<Switch/>
<Footer/>

So that's the point if you put exact in front of HOME, then the root switch works but the switch in the home does not work, and vice versa, if you remove exact, then the root switch does not work and the home switch works, I understand that the problem is in the '/' path, but I don't understand how to fix it

Answer 1

For example:

return (
  <Switch>
    <Route exact path="/(users/.+|product/.+|search)?" component={Home} />
    {/* other routes */}
  </Switch>
);