This content originally appeared on DEV Community and was authored by Jorge Nascimento
React router DOM é uma biblioteca que lida com rotas em React/React-Native, em uma app SPA ( single Page Application ) sua principal característica é ao alternar entre views/página não exista o recarregamento da página, isso melhora o desempenho e experiência do usuário, essa lib lida então com as rotas, url, rotas aninhadas e disponibiliza também hooks para facilitar o acesso a algumas informações da rota e também com redirecionamento de forma programática.
Os exemplos serão feito utilizando a versão 6+.
Instalação
Após iniciar um projeto com um template como o CRA, vamos instalar o react router dom.
yarn add react-router-dom
Principais componentes
Vamos conhecer os principais componentes que usamos para criar as rotas:
-
BrowserRouteré a interface recomendada para executar o React Router em um navegador da web. A BrowserRouter armazena a localização atual na barra de endereços do navegador usando URLs limpas e navega usando a pilha de histórico integrada do navegador.
-
<Routes>e<Route>são as principais maneiras de renderizar algo no React Router. Você pode pensar em uma<Route>como uma espécie de if; se o path corresponder ao URL atual, ele renderizará seu element. A prop caseSensitive<Route caseSensitive>determina se a correspondência deve ser feita com distinção entre maiúsculas e minúsculas (o padrão é false).
Sempre que a localização muda,
<Routes>examina todos os seus children elementos para encontrar a melhor correspondência e renderiza essa ramificação da interface do usuário.
-
<Route>os elementos podem ser aninhados para indicar a interface do usuário aninhada, que também corresponde a caminhos de URL aninhados. As rotas pai renderizam suas rotas filhas renderizando um arquivo .
-
Linké um elemento que permite ao usuário navegar para outra página clicando ou tocando nela. Em react-router-dom, a<Link>renderiza um elemento acessível<a>com um real href que aponta para o recurso ao qual está vinculando. Isso significa que coisas como clicar com o botão direito em um<Link>funciona como você esperaria.
-
<Outlet/>deve ser usado em elementos de rota pai para renderizar seus elementos de rota filho. Isso permite que a interface do usuário aninhada apareça quando as rotas filhas são renderizadas. Se a rota pai corresponder exatamente, ela renderizará uma rota de índice filho ou nada se não houver nenhuma rota de índice.
Criando o componente de rotas
Como exemplo básico vamos criar 3 páginas e definir as rotas, uma dessas página é a de não encontrado, quando uma url não existe na app,
Vamos criar um arquivos para definir as rotas
// routes.js
import { Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
export const RoutesApp = () => {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
};
Aqui temos um arquivo routes.js onde importando os componentes ja citados para criar a definição das rotas, temos também o importe dos arquivos de pages que são as view que serão renderizado de acordo com a rotas, '/ ' página Home, '/about ' página About e no caso de nenhuma path dê match com os definidos a página NotFound será exibido.
Adicionando um menu de navegação
Agora vamos criar um menu para alternar entre as páginas, o menu sera criado em um componente principal, que poderia ser o Appque ja vem criado no template, esse componente precisa ser de hierarquia superior do aplicativo.
// RoutesExample.js
import { BrowserRouter, Link } from "react-router-dom";
import { RoutesApp } from "./routes";
export const RoutesExample = () => {
return (
<BrowserRouter>
<header>
<nav className="nav-routes">
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/asdf">Other</Link>
</li>
</ul>
</nav>
</header>
<RoutesApp />
</BrowserRouter>
);
};
Aqui temos o componente de maior hierarquia da App, definimos então o BrowserRouter como wrapper, criamos um menu que possui os Link que define na props to o recurso que deve ser acessado, nesse caso as páginas Home, About e uma que não existe ( NotFound ).
resultado do exemplo: aqui
Rotas aninhadas ( nested routes )
Podemos criar rotas dentro de rotas, para isso precisamos criar filhos para uma determinada rota, onde esse componente possuir rotas internas, precisamos também fazer uso do <Outlet/> para indicar onde os elementos das sub-rotas irão ser renderizado no componente pai.
Vamos entender:
// routes.js
...
<Route path="/about" element={<About />}>
<Route path="route-a" element={<SubRouteA />} />
<Route path="route-b" element={<SubRouteB />} />
</Route>
Dentro do arquivo routes criamos sub-rotas para a rota About, <SubRouteA /> e <SubRouteA /> são pages ou componentes ( também importando em routes ), nesse caso criei 2 páginas simples, apenas informando que aquele é a sub-rota correspondente, usei uma animação apenas para melhora a visualização da alteração das rotas.
No componente About criamos os Link com as rotas correspondente e logo abaixo inserimos o <Outlet/> que define onde essa sub-rota irá renderizar.
Dessa forma:
// About.js
...
<nav>
<Link to="route-a">Sub-rota a</Link> |
<Link to="route-b">Sub-rota a</Link>
</nav>
<Outlet />
</>
resultado do exemplo: aqui
Rotas privadas
Para criar rotas privadas criamos um componente que checa se um usuário esta logado, e caso esteja retorna o componente desejado do contrário o usuário pode ser redirecionado a página de login por exemplo.
// ProtectedRoute.js
import React from "react";
export const ProtectedRoute = ({ children }) => {
// lógica para checar usuário logado
const logged = true;
return logged ? children : <p>Você não esta logado</p>;
};
No exemplo o componente <ProtectedRoute> retorna o children que é um componente definido como filho no arquivo de rotas, veja o exemplo abaixo:
...
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
Adicionamos esse código no arquivo de rotas e temos então um rota que so sera acessado caso o ProtectedRoute retorne true em sua lógica para identificar se um usuário esta logado, geralmente validando algum token no localStorage.
Principais hooks do react-router-dom
A lib disponibiliza alguns hooks para lidar com redirect, parâmetro da URL, o history do navegador entre outros, vamos conhecer os principais.
- useLocation retorna o objeto location atual. Isso pode ser útil se você quiser realizar algum efeito colateral sempre que a localização atual mudar.
- useNavigate retorna uma função que permite navegar programaticamente, por exemplo, após o envio de um formulário.
-
useParams retorna um objeto de pares de chave/valor dos parâmetros dinâmicos da URL atual que foram correspondidos pelo
<Route path>. As rotas filhas herdam todos os parâmetros de suas rotas pai.
Conhecemos então o essencial da lib que é a mais utilizada junto ao React com a finalidade de roteamento, com esses conhecimentos temos o básico necessário para lidar com rotas, sinta-se a vontade a explorar a documentação oficial para ter informações mais aprofundadas e conceitos avançados.
Obrigado por ler!
Documentação Oficial - Tutorial
Veja também: Aprendendo React - The Roadmap!
Repositório do código: react-router-dom
Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.
Me Sigam :)
This content originally appeared on DEV Community and was authored by Jorge Nascimento
Jorge Nascimento | Sciencx (2022-06-30T16:12:40+00:00) React router DOM. Retrieved from https://www.scien.cx/2022/06/30/react-router-dom/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.