React Router - Main Routes x Application Routes

I'm studying React, I'm currently in version 16.6.3. I really enjoyed using it, I'm reading a lot of its documentation and implementing it as well. I have a lot to learn.

I learned a little about the Routes, I was able to navigate between the pages.

Now I've left my idea a bit more complex and the Routes do not work the way I think. I may be doing it wrong, so I'm posting here to share this with you.

My idea is to separate the Routes into two views.

-1º Authentication Route

-2º Route of the de facto Application.

In this case I have the following command.

class Root extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="/auth" component={Login} />
        </Switch>
      </Router>
    );
  }
}

Viewing this way, the links work normally, but the App component is composed of an "aside" side menu structure and another one for "main" presentation. Code below.

class App extends React.Component {
  render() {
    
    return (
      <Router>
        <Container>
          <Header />
          
          <Content>
            <SideBar/>            
            <Main>
              <Switch>
                <Route exact path="/Topics" component={Topics} />
              </Switch>
            </Main>
          </Content>
        </Container>
      </Router>
    );
  }
}

Here where the problem happens, as the App also has a Router, navigation does not happen inside the "main". The navigation happens only at the / Login level.

In short, I have two routes, one for Login and one for the Application. Within the application I have routes belonging to the application itself, and which must be rendered within the Main component.

How could I apply this idea, or what am I doing wrong?

Thank you ..