Em alguns projetos verifiquei que as rotas são isoladas em uma pasta. Como funciona o isolamento dessas rotas e como ficaria o arquivo App.js já que não seria necessário renderizar nada nele?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Em alguns projetos verifiquei que as rotas são isoladas em uma pasta. Como funciona o isolamento dessas rotas e como ficaria o arquivo App.js já que não seria necessário renderizar nada nele?
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.jsO 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 =)