Como funciona o React Reach Router?

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.