Para qualquer aplicativo React não trivial, você deve dividi-lo em várias páginas. Para isso, torna-se necessário implementar o roteamento de reação.
Este pode ser um tópico intimidante no início. No entanto, este tutorial irá ajudá-lo a aprender todos os fundamentos necessários. Neste tutorial, construiremos um aplicativo que usa roteamento.
últimas postagens
O que é React Routing (roteamento do lado do cliente)
O roteamento React é uma forma de roteamento do lado do cliente implementada em aplicativos React. O roteamento do lado do cliente é uma alternativa ao roteamento do lado do servidor. No roteamento do lado do servidor, o navegador faz uma solicitação GET ao servidor web sempre que você navega para uma página diferente. Essa solicitação pode levar alguns segundos até você receber uma resposta.
Para um aplicativo da web em que você se move constantemente entre as páginas, o tempo de espera cria uma experiência ruim para o usuário. O roteamento do lado do cliente é uma alternativa para isso. Em vez de fornecer HTML ao navegador, o aplicativo usa JavaScript para gerar o HTML para diferentes páginas.
Você só precisa fornecer um arquivo index.html como ponto de entrada para seu aplicativo funcionar. Este ponto de entrada carrega seu código JavaScript. O pacote JavaScript renderizará páginas manipulando o DOM, manipulando o roteamento e implementando a funcionalidade do aplicativo.
Como o servidor renderiza apenas a página index.html, o aplicativo é chamado de aplicativo de página única.
Vantagens do roteamento do lado do cliente
- Isso cria uma melhor experiência do usuário, pois a navegação é mais rápida e o aplicativo responde melhor. Com o roteamento do lado do servidor, cada navegação é uma solicitação de rede com alguns segundos de latência.
- Ele permite a criação de aplicativos offline, pois todo o código necessário para executar o aplicativo pode ser armazenado em cache localmente. Isso permite criar mais aplicativos disponíveis e oferecer funcionalidade offline.
- O aplicativo também usará menos dados, pois as solicitações de rede serão significativamente reduzidas se tudo for enviado uma vez e alguns arquivos forem armazenados em cache localmente.
- Também reduz a carga do servidor, pois o servidor só precisa renderizar o aplicativo uma vez. Isso contrasta com a renderização do lado do servidor, onde o servidor renderiza continuamente o aplicativo.
A seguir, vamos discutir como implementar o roteamento de reação.
Como implementar o roteamento React
Para este tutorial, construiremos um aplicativo simples para fazer anotações. Será composto por várias páginas. Implementaremos o roteamento do lado do cliente usando React Router DOM para permitir que o cliente navegue entre as diferentes páginas. Não construiremos tudo para que o aplicativo funcione. Em vez disso, vamos nos concentrar no roteamento.
Pré-requisitos
Para seguir este tutorial, você deve entender HTML, JavaScript e React. Você também precisará ter o Node.js e o NPM instalados. Você pode baixá-los e instalá-los simultaneamente instalando o Nodejs do local na rede Internet. Ou siga o guia no vídeo do YouTube incorporado.
O que estamos construindo
O aplicativo terá várias páginas. Usando o roteamento de reação, você poderá navegar para páginas diferentes. Os designs das páginas são mostrados abaixo.
A página inicial é renderizada na rota ‘/’.
A página Sobre é renderizada na rota ‘/about’.
Página de notas na rota ‘/notes’.
Nova página de notas na rota ‘/notes/new’.
Você pode ver cada nota na íntegra na página de notas. Esta página é renderizada na rota ‘/routes/
Começando
Para começar, crie um novo projeto React. Vou usar o Vite, então o comando para inicializar um novo projeto é este:
npm create vite@latest scribbble --template react
Especifiquei ‘scribbble’ como nome do projeto e React como modelo. A seguir, vou abrir o VS Code usando os comandos abaixo:
cd scribbble code .
Depois que o VS Code for aberto, retornarei à janela do terminal e instalarei o react-router-dom. Este pacote facilita a implementação do roteamento de reação em seus aplicativos.
npm install react-router-dom
Vamos criar um arquivo onde nossas anotações serão armazenadas. Crie um arquivo src/notes.js e adicione o seguinte código:
const notes = [
{
id: 1,
title: "Note 1",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
id: 2,
title: "Note 2",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
id: 3,
title: "Note 3",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
];
export default notes;
Em seguida, exclua o arquivo src/App.css. Não o usaremos neste projeto. Além disso, certifique-se de remover a importação do arquivo App.css do arquivo App.jsx.
Depois disso, substitua tudo no arquivo index.css por isto:
:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color:#404040}*{margin:0;padding:0}.nav-container{display:flex;justify-content:space-between;padding:15px 30px}.home-buttons,.nav{display:flex;gap:10px}a{text-decoration:none;color:inherit;font-weight:600}h1{font-size:63px;margin:20px 0}input,textarea{border:1px solid #f1f1f1;background-color:#fafafa;outline:0;padding:10px;width:100%}textarea{resize:none;font-family:inherit}.container{padding:15px}.primary{background-color:#8a2be2;color:#fff}.secondary{background-color:#eee}.button{padding:15px 30px;font-size:16px;border:none;font-weight:700;border-radius:7px;cursor:pointer}.home-container{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.new-note-container{padding:20px}.new-note-form{display:flex;flex-direction:column;align-items:center;width:500px;gap:20px;margin:auto;border-radius:7px;padding:20px 30px}.notes-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:0 60px}.note{border:1px solid #d3d3d3;padding:15px;border-radius:7px}.note h2{font-size:1rem;margin-bottom:10px}.note p{color:#585858;font-size:.9rem;cursor:pointer}.note-container{display:flex;align-items:center;justify-content:center;padding:50px}.note-content{width:500px}
A seguir, crie os seguintes arquivos para as páginas que iremos criar:
- src/pages/Home.jsx
- src/pages/Sobre.jsx
- src/pages/Note.jsx
- src/pages/NewNote.jsx
- src/pages/Notes.jsx
Em seguida, crie o arquivo para o componente Barra de Navegação. Este arquivo estará localizado em src/components/NavBar.jsx
Configurando o roteamento React
Com nosso aplicativo configurado, configuraremos o roteamento em nosso aplicativo a seguir.
Abra o arquivo App.jsx e exclua tudo dentro dele. Em seguida, adicione as seguintes importações ao topo do arquivo:
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { NavBar } from "./components/NavBar";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Notes } from "./pages/Notes";
import { Note } from "./pages/Note";
import { NewNote } from "./pages/NewNote";
Estamos importando os componentes BrowserRouter, Routes e Routes do react-router-dom. Eles serão usados para configurar um roteador. Em seguida, importamos a NavBar do nosso diretório de componentes e diversas páginas dos nossos arquivos de páginas. Ainda não implementamos as páginas, mas o faremos em breve.
A seguir, vamos configurar nosso componente App:
export default App () {
}
Em seguida, adicionamos a seguinte marcação em nossa instrução return:
return (
<BrowserRouter>
</BrowserRouter>
)
Isso renderiza o BrowserRouter, um componente React fornecido pelo componente react-router-dom. Este componente configura um roteador que funciona dentro do navegador. Nosso aplicativo estará contido nessas tags.
A seguir, adicionaremos a barra de navegação e criaremos um componente Rotas.
return (
<BrowserRouter>
<NavBar />
<div className="container">
<Routes>
</Routes>
</div>
</BrowserRouter>
);
Dentro do elemento BrowserRouter, adicionamos uma NavBar. Definiremos esse elemento posteriormente, mas ele cria os links no topo de cada página. Em vez de escrevê-lo separadamente para cada página, criaremos uma NavBar.
Em seguida, criamos um elemento contêiner. Este elemento não é necessário para roteamento. Acabamos de adicioná-lo para aplicar estilo.
Dentro do contêiner, adicionamos o componente Routes. É aqui que diferentes páginas serão renderizadas dependendo da rota em que o navegador está. Tudo dentro do componente Routes será renderizado novamente sempre que a rota for alterada.
Por último, adicionamos as rotas para as diferentes páginas.
return (
<BrowserRouter>
<NavBar />
<div className="container">
<Routes>
<Route path="/" Component={Home} />
<Route path="about" Component={About} />
<Route path="notes" Component={Notes}>
<Route path="new" Component={NewNote} />
<Route path=":id" Component={Note} />
</Route>
</Routes>
</div>
</BrowserRouter>
);
O componente Home será renderizado quando o caminho for ‘/’, e o componente About será renderizado na rota ‘/about’. O componente Notes será renderizado na rota ‘/notes’. Também temos a rota ‘/notes/new’ e ‘/notes/:id’ definidas como rotas aninhadas.
Rotas aninhadas explicadas
Uma rota pode conter rotas internas. Elas são chamadas de rotas aninhadas. O caminho para essas rotas aninhadas será unido à rota pai para formar o caminho completo. Por exemplo, as rotas ‘notas’ e ‘novas’ serão combinadas em ‘/notas/novas’.
Quanto à forma como os componentes são renderizados quando o usuário navega para a rota pai, apenas o componente pai será renderizado. No entanto, os componentes pai e aninhado serão renderizados juntos quando navegarem na rota aninhada.
Para renderizar os dois componentes juntos, o componente Notes deve renderizar um componente Outlet que especifica onde o componente Note será incorporado. Você verá isso mais tarde, quando começarmos a criar as páginas.
Rotas Dinâmicas
Até agora, especificamos a rota literal que queremos corresponder. Por exemplo, as rotas ‘/’ e ‘about’. No entanto, react-router-dom nos permite especificar rotas dinâmicas. Uma rota dinâmica contém uma parte que pode ser comparada com um parâmetro de consulta. Quando correspondido, o parâmetro de consulta é passado para a página.
Por exemplo, dentro da rota pai ‘posts’, temos uma rota aninhada que contém uma parte dinâmica especificada por :id. Esta rota aceita qualquer texto no lugar de :id , e esse texto fica disponível para o componente Note como id.
Construindo a barra de navegação
Usamos componentes Link em vez de tags âncora normais para navegar usando react-router-dom. Portanto, nossa barra de navegação deverá ficar assim:
import { Link } from "react-router-dom";
export function NavBar() {
return (
<div className="nav-container">
<Link to="/">Scribbble</Link>
<nav className="nav">
<Link to="/about">About</Link>
<Link to="/notes">Notes</Link>
<Link to="/notes/new">New Note</Link>
</nav>
</div>
);
}
Adicione o código a src/pages/NavBar.jsx.
Construindo as páginas
A seguir, vamos construir as páginas. Para a página inicial, adicione o seguinte código ao src/pages/Home.jsx.
import { useNavigate } from "react-router-dom";
export function Home() {
const navigate = useNavigate();
return (
<div className="home-container">
<h1>Notes for professionals</h1>
<div className="home-buttons">
<button
onClick={() => {
navigate("/notes/new");
}}
className="button primary"
>
Start Scribbling
</button>
<button
onClick={() => {
navigate("/notes");
}}
className="button secondary"
>
View Notes
</button>
</div>
</div>
);
}
Na HomePage, gostaríamos de usar botões para navegar. Como resultado, usamos o gancho useNavigate para navegar programaticamente. Importamos o gancho e o chamamos dentro do Home Component. O valor de retorno após chamar o gancho é uma função que você pode usar para navegar.
A seguir, definiremos a página Sobre. Adicione o seguinte código ao seu arquivo src/pages/About.jsx.
export function About() {
return (
<div>
<h1>About</h1>
<p>Simple Notes is the best note-taking application for professionals</p>
</div>
);
}
Depois disso, definiremos a página Notas.
Neste componente, também temos que incluir um componente Outlet que será usado para renderizar quaisquer rotas aninhadas. Por esse motivo, nossa página src/pages/Notes.jsx ficará assim.
import { Outlet, useNavigate } from "react-router-dom";
import notes from "../notes";
export function Notes() {
const navigate = useNavigate();
return (
<div>
<Outlet />
<div className="notes-list">
{notes.map((note) => {
return (
<div
className="note"
key={note.id}
onClick={() => {
navigate("/notes/" + note.id);
}}
>
<h2>{note.title}</h2>
<p>{note.body.slice(0, 100)}</p>
</div>
);
})}
</div>
</div>
);
}
A seguir, definimos a página Nota.
Isso será renderizado para uma nota individual. Para decidir sobre uma nota a ser renderizada, o Notes acessará o id especificado na parte dinâmica da rota. Para fazer isso, usamos o gancho userParams. Portanto, este deve ser o código dentro do seu arquivo src/pages/Note.jsx:
import { useParams } from "react-router-dom";
import notes from "../notes";
export function Note() {
const params = useParams();
const note = notes.find((note) => note.id == params.id);
return (
<div className="note-container">
<div className="note-content">
<h2>{note.title}</h2>
<p>{note.body}</p>
</div>
</div>
);
}
Por último, criaremos o componente NewNote dentro de src/pages/NewNote.jsx usando o seguinte código:
export function NewNote() {
return (
<div class="new-note-container">
<form class="new-note-form">
<h2>New Note</h2>
<input type="text" name="title" placeholder="Note title" />
<textarea rows="10" placeholder="Note text" />
<button class="button primary">Save Note</button>
</form>
</div>
);
}
Neste ponto, escrevemos todo o código do aplicativo. Você pode executar o aplicativo usando npm run dev. Navegue para páginas diferentes e veja quão rápido é o roteamento do lado do cliente.
Desvantagens do roteamento do lado do cliente
Apesar de suas muitas vantagens, o roteamento do lado do cliente apresenta diversas desvantagens. Eles são explicados abaixo:
- O carregamento inicial da página pode ser lento, pois todo o aplicativo precisa ser carregado. O pacote JavaScript pode ser muito grande, exigindo longos tempos de carregamento.
- Como o JavaScript gera a marcação, a página não será otimizada para SEO.
- Como tudo depende de JavaScript, navegadores que não suportam JavaScript ou que possuem JavaScript desabilitado não conseguirão executar o aplicativo.
Conclusão
Neste artigo, abordamos o roteamento de reação construindo um pequeno projeto. Embora não tenhamos abordado tudo, este tutorial aborda conceitos que você usará na maioria dos projetos em que trabalhará. Para obter mais informações sobre react-router-dom, aqui estão os documentos oficiais.
A seguir, leia este artigo sobre bibliotecas de formulários React.