Como usar o React Router V6: um guia para iniciantes

React Router é a biblioteca mais popular que você pode usar para implementar roteamento em aplicativos React. Ele 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.

O React Router V6 introduz algumas mudanças significativas no algoritmo de roteamento, para resolver as armadilhas que estavam presentes em sua versão anterior e fornecer uma solução de roteamento aprimorada.

Introdução ao roteamento usando React Router V6

Para começar, crie um aplicativo React. Alternativamente, configurar um projeto React usando Vite. Depois de criar o projeto, vá em frente e instale o react-roteador-dom pacote.

npm install react-router-dom

Criando rotas usando React Router

Para criar rotas, comece envolvendo todo o aplicativo com um NavegadorRoteador componente. Atualize o código em seu index.jsx ou principal.jsx arquivo da seguinte forma:

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(



 </Router>
 </React.StrictMode>,
)

O agrupamento do componente App com o componente BrowserRouter garante que todo o aplicativo obtenha acesso ao contexto de roteamento e aos recursos oferecidos pela biblioteca React Router.

Usando o componente Rotas

Depois de envolver o aplicativo com o componente BrowserRouter, você poderá definir suas rotas.

O Rotas componente é uma melhoria do Trocar componente que foi usado anteriormente pelo React Router v5. Este componente suporta roteamento relativo, classificação automática de rotas e a capacidade de trabalhar com rotas aninhadas.

Normalmente, você adicionará rotas no nível mais alto do seu aplicativo, geralmente dentro do componente App. Porém, você pode defini-los em qualquer outro local, dependendo da estrutura do seu projeto.

Abra o Aplicativo.jsx arquivo e substitua o código padrão do React pelo seguinte:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

Esta configuração de roteamento mapeia caminhos de URL específicos para os componentes da página correspondentes (Dashboard e Sobre), garantindo que o aplicativo renderize o componente apropriado quando um usuário visitar um determinado URL.

Observe o elemento prop, dentro do componente Route, que permite passar um componente funcional em vez de apenas o nome do componente. Isso torna possível passar adereços pelas rotas e seus componentes associados.

No fonte diretório, crie um novo Páginas diretório e adicione dois novos arquivos: Painel.jsx e Sobre.jsx. Vá em frente e defina componentes funcionais nesses arquivos para testar as rotas.

Usando createBrowserRouter para definir rotas

Documentação do React Router recomenda usar o createBrowserRouter componente para definir a configuração de roteamento para aplicativos da web React. Este componente é uma alternativa leve para NavegadorRoteador que leva uma série de rotas como argumento.

Ao utilizar este componente, não há necessidade de definir suas rotas dentro do componente App. Em vez disso, você pode delinear todas as suas configurações de rota dentro do index.jsx ou principal.jsx arquivo.

Aqui está um exemplo de como você pode usar este componente:

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>
);

A configuração de roteamento usa o createBrowserRouter e Provedor de roteador componentes para criar um sistema de roteamento para um aplicativo React.

No entanto, a única diferença com esta implementação é que, em vez de agrupar a aplicação usando o componente BrowserRouter, ela usa o Provedor de roteador componente para passar o Roteador contexto para todos os componentes do aplicativo.

Implementando rotas de página não encontrada

O caminho prop no componente Route compara o caminho fornecido com o URL atual para determinar se há uma correspondência antes de renderizar o componente necessário.

Para lidar com casos onde nenhuma rota corresponde, você pode criar uma rota específica que irá gerenciar 404 erros de página não encontrada. A inclusão desta rota garante que os usuários possam receber respostas significativas em situações em que acessaram um URL inexistente.

Para implementar uma rota 404, adicione esta rota no componente Rotas:

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

Em seguida, crie um personalizado NotFound.jsx componente e, finalmente, estilizar o componente usando módulos CSS.

O asterisco (*) é um caractere curinga que trata de cenários em que nenhuma das rotas especificadas corresponde ao URL atual.

Navegação programática usando o gancho useNavigate

O useNavigate hook fornece uma maneira programática de lidar com a navegação em aplicativos. Esse gancho é particularmente útil quando você deseja acionar a navegação em resposta a interações ou eventos do usuário, como cliques em botões ou envios de formulários.

Vamos dar uma olhada em como usar o useNavigate gancho para navegação programática. Supondo que você criou o Sobre.jsx componente funcional, importe o gancho do pacote React Router:

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

Em seguida, adicione um botão que, quando clicado, aciona a navegação para uma rota específica.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

Vale a pena mencionar que o gancho useNavigate e o gancho useNavigation, introduzidos no React Router v6, servem a propósitos distintos, apesar de seus nomes intimamente relacionados.

O gancho useNavigation permite acessar detalhes relacionados à navegação, como o estado de navegação em andamento e outros detalhes. Isso é útil quando você deseja renderizar elementos da interface do usuário, como o carregamento de controles giratórios, para fornecer feedback visual sobre processos em andamento.

Aqui está um exemplo de como você pode utilizar o gancho useNavigation.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

Neste exemplo, o Botão de envio O componente atualizará dinamicamente seu texto com base no estado de navegação obtido do gancho useNavigation.

Mesmo que esses ganchos tenham funções diferentes, você ainda pode usá-los juntos. O gancho useNavigate para iniciar o processo de navegação e o gancho useNavigation para recuperar detalhes de navegação em tempo real, que então orientam o tipo de UI de feedback a ser renderizada no navegador.

Usando o gancho useRoutes

Este gancho permite definir os caminhos da rota junto com seus componentes correspondentes dentro de um objeto. Posteriormente, o gancho é usado para combinar as rotas e exibir os componentes relevantes.

Aqui está um exemplo simples de como usar o gancho:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

Neste exemplo, o rotas object define o mapeamento de caminhos de URL para componentes. O Aplicativo O componente então usa esse gancho para corresponder ao URL atual e renderizar o componente apropriado com base na rota correspondente.

O uso desse gancho oferece controle granular sobre sua lógica de roteamento e permite criar facilmente uma lógica personalizada de manipulação de rotas para seu aplicativo.

Lidando com roteamento em aplicativos React

Embora o React em si não inclua um mecanismo pré-construído para lidar com tarefas de roteamento, o React Router preenche essa lacuna. Ele fornece vários componentes de roteamento e funções utilitárias que você pode usar facilmente para criar aplicativos interativos e fáceis de usar.