Melhores práticas para usar React Router
O roteamento de links é uma das partes mais importantes de uma aplicação web eficiente, sem isto, simplesmente os usuários não conseguirão navegar pelo app.
Se você está começando com ReactJs, provavelmente já precisou utilizar o React Router ou já viu algo relacionado à esta biblioteca. Então, as chances de você ter visto algo assim são grandes:
import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Profile from "./pages/Profile";
import Login from "./pages/Login";
import Settings from "./pages/Settings";
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/profile" element={<Profile />} />
<Route path="/login" element={<Login />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</BrowserRouter>
);
};
export default App;
Este é o clássico arquivo App.js.
Vou fazer papel de chato agora: leio muito por aí que "está ok assim se for um projeto pequeno". Eu discordo. As melhores práticas e padrões devem ser seguidas desde o começo, para não ficar com "vício", se é que me entendem.
Então qual é a melhor forma de gerenciar rotas?
Primeiramente, devemos alterar o código do arquivo App.js para algo parecido com:
App.js
import "./App.css";
import { BrowserRouter } from "react-router-dom";
import Router from "./pages/router";
const App = () => {
return (
<BrowserRouter>
<Router />
</BrowserRouter>
);
};
export default App;
Está melhorando...
Agora, o arquivo que define as rotas, componente a ser usado e título da página em pages/pages.js
:
import About from "./About";
import Home from "./Home";
const pages = [
{
path: "",
element: <Home />,
title: "home"
},
{
path: "about",
element: <About />,
title: "about"
}
];
export default pages;
Crie um arquivo chamado router em routes/routes.js
ou pages/routes.js
:
import { Route, Routes } from "react-router-dom";
import pages from "./pages";
const Router = () => {
const pageRoutes = pages.map(({ path, title, element }) => {
return <Route key={title} path={`/${path}`} element={element} />;
});
return <Routes>{pageRoutes}</Routes>;
};
export default Router;
Pra finalizar, atualize o arquivo App.js
:
import "./App.css";
import { BrowserRouter } from "react-router-dom";
import Router from "./pages/router";
const App = () => {
return (
<BrowserRouter>
<Router />
</BrowserRouter>
);
};
export default App;
Assim, suas rotas ficam mais organizadas e também é mais fácil de gerenciar.