Currently I'm trying to make it so that my parent router is activated each time. I'm not very sure of the terminology here.

<BrowserRouter>
  <Switch>
    <Route exact path='/browserRouterPath' component={loginComponent}/>
    <HashRouter>
      <Route path='/hashRouterPath' component={loginComponent2}/> 
      <Route path='/' component={loggedInComponent}/>
    </HashRouter>
  </Switch>
</BrowserRouter>

LoggedInComponent

<Switch>
<Route exact path='/' render={() => (
                             <Redirect to: {{pathname: '/finalComponent'> }}/> 
                             )}> />
...
</Switch>

My current problem is that my components in the hashRouter are not being called. When the loggedInComponent redirects it to the new path, the hashRouter is not called.

However, if I remove the hashRouter in the first block of code. The hashRouter is called without incident, but that breaks the CSS/styling of the components in the program.

Is there a way to render the parent component each time? Or is there a workaround that eliminates the hashRouter but keeps the CSS for me?