Why does React render all routes?

Question

React

Good afternoon. I just can't understand why all components are rendered in this format

<Route exact path="/login">
      <LoginPage />
    </Route>
    <App>
      <Route exact path="/">
        <MainPage />
      </Route>
      <Route exact path="/categories">
        <Categories />
      </Route>
      <Route path="/categories/add">
        <CategoriesAddPage />
      </Route>
      <Route exact path="/settings">
        <Settings />
      </Route>
    </App>

But when I rewrite the Route using a prop component instead of nested in the Route, it renders only what is needed.
For completeness, here is the use of
index.js code

import routes from './routes';
ReactDOM.render(
  <Provider store={createStore(reducer)}>
    <Router>
      <ServiceContext.Provider value={categoriesService}>
        {routes}
      </ServiceContext.Provider>
    </Router>
  </Provider>,
  document.getElementById('root')
);

routes.js

const routes = (
  <React.Fragment>
    <Route exact path="/login" component={LoginPage} />
    <App>
      <Route exact path="/" component={MainPage} />
      <Route exact path="/categories" component={Categories} />
      <Route path="/categories/add" component={CategoriesAddPage} />
      <Route exact path="/settings" component={Settings} />
    </App>
  </React.Fragment>
)

export default routes;

app.js

const App = (props) => {
  return (
    <div className="app">
      <div className="content">
        {props.children}
      </div>
      <Navigation />
    </div>
  )
}

UPD: problem solved. A bug with child rendering was fixed in react-router-dom 5.1.0, I had a version below