Como funciona o React Reach Router?
Tags: react, beginners, programming
Published: 2023-02-28 17:13:08

O Reach Router é uma biblioteca de roteamento para React que fornece uma maneira simples e flexível de gerenciar a navegação em uma aplicação web. Com ele, é possível criar rotas para diferentes páginas, adicionar parâmetros e até mesmo controlar a navegação programaticamente.
Vale destacar que para uma melhor compreensão é recomendável ver o artigo sobre React Router: https://dev.to/altencirsilvajr/o-conceito-de-react-routers-e-seu-funcionamento-5hia


Neste artigo, vamos explorar o Reach Router e como ele pode ser usado para criar uma aplicação de navegação simples em React.

**Como instalar? **

Antes de começar a usar o Reach Router, é necessário instalar a biblioteca em seu projeto. Você pode fazer isso usando o npm ou o yarn.

```
//NPM 
npm install @reach/router

//Yarn
yarn add @reach/router
```

Uma vez instalado o Reach Router, podemos começar a criar rotas para nossas páginas. Para fazer isso, primeiro precisamos importar alguns componentes do Reach Router em nosso arquivo de roteamento.

```
import { Router, Link } from "@reach/router";
```
O componente `Router` é o componente principal do Reach Router e é responsável por gerenciar as rotas de nossa aplicação. Já o componente Link é usado para criar links entre as páginas.

Para criar uma rota, basta adicionar o componente Route dentro do componente Router e especificar o caminho para a página correspondente.

```
<Router>
  <Route path="/" component={HomePage} />
  <Route path="/about" component={AboutPage} />
</Router>
```
Acima,nós criamos duas rotas para as páginas "HomePage" e "AboutPage". A primeira rota corresponde à página inicial de nossa aplicação e a segunda rota corresponde à página "Sobre". Com isso,se acessarmos a URL "/" em nosso aplicativo, veremos a página HomePage. Se acessarmos a URL "/about", veremos a página AboutPage.

Uma das principais vantagens do Reach Router é que ele permite que passemos parâmetros para nossas rotas. Por exemplo, se tivermos uma rota para exibir informações de um usuário específico, podemos passar o ID do usuário como parâmetro na URL. Só precisamos passar os parâmetros no caminho da rota, como no exemplo a seguir:

```
<Router>
  <Route path="/" component={HomePage} />
  <Route path="/users/:id" component={UserPage} />
</Router>
```
No exemplo acima, adicionamos uma rota para exibir as informações do usuário com o ID especificado. Quando o usuário acessar a URL "/users/123", o componente UserPage será renderizado e o parâmetro ID será passado como uma prop para o componente.

```
function UserPage(props) {
  const { id } = props;
  // exibe informações do usuário com o ID especificado
}
```

Para controlar o Reach Router, nós usamos o hook `useNavigate`, redirecionando o usuário para outra página em resposta a uma ação específica, como um clique em um botão. Veja o exemplo a seguir:

```
import { useNavigate } from "@reach/router";

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

  function handleClick() {
    navigate("/about");
```

A função Homepage engloba a outra função de handleClik. No caso da Homepage, nós temos uma const que demos o nome de `navigate` que está fazendo o uso de um hook que é chamado na função handleClick para modificar e ir para a página diferente que é o `/about`

Com isso, vimos que o Reach Router é útil para o gerenciamento da navegação web do seu sistema. Sempre lembrando que ela foi criada para o uso de aplicações de navegação simples no React, mesmo assim com ela, conseguimos criar uma navegação estável e rápida em nosso sistema por meio dessa biblioteca.