Como usar o React Router V6: um guia para iniciantes

React Router é a biblioteca mais popular que pode utilizar para implementar o encaminhamento em aplicações React. Ela fornece uma abordagem baseada em componentes para lidar com uma variedade de tarefas de roteamento, incluindo navegação de página, parâmetros de consulta e muito mais.

A versão 6 do React Router implementa modificações substanciais em seu algoritmo de roteamento para corrigir deficiências inerentes a iterações anteriores do software e fornecer um sistema de gerenciamento de rotas mais avançado e eficiente.

Introdução ao roteamento usando o React Router V6

Para iniciar o processo, você pode estabelecer um aplicativo React ou configurar um projeto React utilizando o Vite como servidor de desenvolvimento. Uma vez que o projeto tenha sido estabelecido, prossiga para introduzir a biblioteca react-router-dom dentro das dependências do projeto.

 npm install react-router-dom 

Criando rotas usando o React Router

Encapsular todo o aplicativo em um componente BrowserRouter é um meio eficaz de criar rotas. Para conseguir isso, atualize os arquivos JavaScript relevantes, como index.jsx ou main.jsx . Ao incorporar a modificação sugerida, terá estabelecido com êxito uma base para o encaminhamento na sua aplicação.

 import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
)

A utilização do wrapper BrowserRouter em torno do componente Application concede acesso total à funcionalidade e aos recursos de roteamento fornecidos pela biblioteca React Router, abrangendo todo o aplicativo.

Usando o componente Routes

Uma vez que seu aplicativo tenha sido englobado pelo componente BrowserRouter, é possível delinear a configuração de roteamento.

O componente Routes representa um avanço significativo em relação ao seu antecessor, o componente Switch, em termos de funcionalidade no React Router. Este componente oferece suporte para roteamento relativo, permitindo transições suaves entre diferentes partes do aplicativo; ele também possui classificação automática de rotas, garantindo que os usuários sejam direcionados para o conteúdo mais relevante com base em seu histórico de navegação; além disso, ele pode lidar com rotas aninhadas, permitindo que os desenvolvedores criem hierarquias complexas de páginas com facilidade.

Em geral, as rotas são tipicamente definidas no componente de nível superior de uma aplicação, como o componente App. No entanto, a sua colocação pode variar com base na estrutura organizacional específica de um projeto.

Abra o ficheiro “App.jsx” localizado no diretório do seu projeto e substitua o código React predefinido que aí se encontra pelo modelo fornecido abaixo:

 import './App.css'
import { Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import About from './pages/About';

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  )
}

export default App 

A configuração de encaminhamento acima mencionada direcciona os caminhos de URL designados para os respectivos elementos de página, nomeadamente Dashboard e About, garantindo assim que a aplicação apresenta o elemento correto quando acedida através de um endereço URL específico.

Considere a funcionalidade da propriedade ’element’ encontrada no componente Route, que permite transmitir um componente funcional em vez de apenas identificar a sua designação. Tal disposição permite a transmissão de propriedades através de caminhos encaminhados e dos seus elementos correspondentes.

Na pasta de origem, crie uma nova secção de directórios chamada “páginas” e, em seguida, incorpore dois novos ficheiros intitulados “Dashboard.jsx” e “About.jsx”. Utilize estes ficheiros para experimentar várias rotas.

Usando createBrowserRouter para definir rotas

A documentação do React Router recomenda o uso do componente createBrowserRouter para definir a configuração de roteamento para aplicativos Web React. Esse componente é uma alternativa leve ao BrowserRouter, que recebe um array de rotas como argumento.

A incorporação deste elemento elimina a necessidade de definição de rotas no componente App. É possível estabelecer todas as configurações de rotas no ficheiro index.jsx ou main.jsx.

Certamente, aqui está uma versão refinada dessa declaração:scssPor exemplo, vamos considerar um cenário em que se emprega esse elemento:

 import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './App.jsx'
import Dashboard from './pages/Dashboard';
import About from './pages/About';


const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/dashboard",
    element: <Dashboard />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
); 

A utilização dos componentes createBrowserRouter e RouterProvider facilita o estabelecimento de uma infraestrutura de roteamento em um aplicativo baseado em React, aproveitando seus recursos para direcionar efetivamente a navegação do usuário pelas várias páginas ou funcionalidades interconectadas do programa.

Nesta implementação específica, existe uma distinção da abordagem convencional em que o componente BrowserRouter encapsula toda a aplicação. Em vez disso, o componente RouterProvider é utilizado para transmitir o contexto do router a todas as partes constituintes do software através da sua providência.

Implementando rotas de página não encontrada

A funcionalidade do prop path dentro do contexto do componente Route do React Router reside em sua capacidade de realizar uma comparação entre o caminho especificado e o URL atual, com o objetivo final de determinar se eles se alinham ou não para que ocorra uma navegação bem-sucedida.

Para resolver os casos em que não há correspondência entre as rotas disponíveis, é possível estabelecer um caminho designado que gere especificamente os erros “404 Page Not Found”. Ao incorporar essa via, torna-se viável para os utilizadores finais obterem respostas compreensíveis nas circunstâncias em que tentam aceder a um URL inválido.

Para incorporar uma rota 404 na aplicação, é necessário incluí-la no RouteComponent da seguinte forma:

 // using the Route component
<Route path="*" element={<NotFound />} />

 // using createBrowserRouter
{ path: "*", element: <NotFound />, }, 

Criaremos um componente NotFound personalizado que estende o componente NotFoundRouteComponent incorporado do React. Em seguida, usaremos esse componente para renderizar quando uma página solicitada não for encontrada no servidor. Para isso, primeiro precisamos instalar o Axios para fazer solicitações de API e estilizar nossos componentes com módulos CSS. Por fim, importaremos e utilizaremos esses pacotes em nosso código.

O asterisco (*) serve como um espaço reservado para quaisquer caracteres numa expressão regular, permitindo-lhe acomodar instâncias em que nenhuma rota específica tenha sido correspondida com o URL fornecido.

Navegação programática usando o gancho useNavigate

A utilização do gancho useNavigate apresenta uma abordagem instrumental para gerenciar a navegação em aplicativos de software. Em particular, este gancho revela-se vantajoso quando a navegação é feita em conjunto com acções ou ocorrências iniciadas pelo utilizador, incluindo premir botões e submeter formulários.

De facto, é necessário obter o hook utilizeNavigate do estimado pacote React Router para facilitar as operações de navegação através da implementação do componente funcional About.jsx.

 import { useNavigate } from 'react-router-dom'; 

Incorporar um elemento de interface do utilizador no layout da aplicação que, ao ser ativado, redirecciona o utilizador para um caminho designado.

 function About() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate("/");
  };

  return (
    <>
      // Rest of the code ...
      <button onClick={handleButtonClick}>
    </>
  );
}

export default About; 

É importante observar que, embora o hook useNavigate e o hook useNavigation, ambos introduzidos na versão 6 do React Router, compartilhem convenções de nomenclatura semelhantes, eles têm funções e propósitos diferentes.

A utilização do gancho useNavigation permite aceder a informação pertinente relativa à navegação, incluindo o estado atual da navegação e vários detalhes adicionais. Esta funcionalidade pode ser benéfica na renderização de componentes da interface do utilizador, tais como indicadores de carregamento, que oferecem uma representação visual das operações em curso.

Certamente, aqui está uma versão refinada do exemplo fornecido, demonstrando a implementação do hook useNavigation:

 import { useNavigation } from "react-router-dom";

function SubmitButton() {
  const navigation = useNavigation();

  const buttonText =
    navigation.state === "submitting"
      ? "Saving..."
      : navigation.state === "loading"
        ? "Saved!"
        : "Go";

  return <button type="submit">{buttonText}</button>;
} 

O trecho de código fornecido demonstra um componente funcional React chamado “SubmitButton”, que utiliza o Hook personalizado “useNavigation” para obter o estado de navegação atual. Isto permite que a etiqueta do botão seja actualizada dinamicamente em resposta a alterações na interação do utilizador com a aplicação.

Apesar das suas funções distintas, é possível utilizar os ganchos “useNavigate” e “useNavigation” em conjunto. O primeiro serve como mecanismo de iniciação para processos de navegação, enquanto o segundo fornece acesso a dados de navegação em tempo real que determinam o tipo de feedback da interface do utilizador a ser apresentado no ambiente do browser.

Utilização do gancho useRoutes

O presente gancho permite a especificação de percursos de percursos juntamente com os seus componentes correlativos de uma forma abrangente, facilitando assim o processo de correspondência de percursos e a consequente apresentação dos componentes pertinentes.

Certamente, aqui está uma ilustração elegante que demonstra o emprego deste utilitário:

 import { useRoutes } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';

const routes = [
  {
    path: '/',
    element: <Dashboard/>,
  },
  {
    path: '/about',
    element: <About />,
  },
];

function App() {
  const routeResult = useRoutes(routes);
  return routeResult;
}

export default App; 

O objeto routes serve de mediador entre os URLs e os componentes correspondentes na aplicação. Ao utilizar este objeto, o componente da aplicação pode mapear com êxito o URL atual para o respetivo componente, tirando partido do processo de correspondência estabelecido através das rotas definidas.

A utilização desta funcionalidade permite-lhe uma gestão precisa da sua arquitetura de encaminhamento, facilitando o desenvolvimento de mecanismos de tratamento de rotas adaptados aos requisitos específicos da sua aplicação.

Manipulação de roteamento em aplicativos React

O React não oferece inerentemente uma solução para gerenciar a navegação em um aplicativo; no entanto, o React Router foi projetado especificamente para atender a essa necessidade, fornecendo um conjunto abrangente de componentes e funcionalidades de roteamento que facilitam a criação de interfaces altamente responsivas e intuitivas. Ao utilizar estas funcionalidades, os programadores podem criar aplicações com capacidades de navegação perfeitas, assegurando simultaneamente uma experiência de utilizador optimizada.