Organização das rotas

Utilizando o react-router-dom no App.js ele vai renderizar somente um componente , no qual o react-router-dom que tratará qual componente será exibido de acordo com a rota da aplicação.

Por exemplo, em uma aplicação que desenvolvi, a estrutura dos arquivos ficou assim:

- src/
    - routes/
        - routes.js
    - App.js

O App.js:

import React from "react";

import Routes from "./routes/routes";

import "./styles/main.css";

function App() {
  return (
    <div className="App">
      <Routes />
    </div>
  );
}

export default App;

E o routes.js:

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import HomePage from "../pages/Home/HomePage";
import LoginPage from "../pages/Login/LoginPage";

const routes = () => (
  <BrowserRouter>
    <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/login" component={LoginPage} />
    </Switch>
  </BrowserRouter>
);

export default routes;

O <BrowserRouter/> será quem vai decidir qual componente ser renderizado no dentro de App.js

Muito obrigado, Pedro =)