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.