All Articles

Conheça uma alternativa ao React-Router: o Reach Router

Nesse tutorial de 5 minutos vou mostrar como usar o REACH Router, uma alternativa ao tradicional e onipresente React router.

Instalação

Dentro do seu projeto, ele pode ser instalado via npm da seguinte forma:

npm install @reach/router

Se a sintaxe ’@’ é nova para você, saiba que é um recurso do NPM para permitir criar um pacote com escopo, ou seja, um namespace.

Em seguida, importe-o em seu projeto.

import {router} from '@reach/router';

Uso básico

Utilize esse biblioteca no arquivo de nível mais alto em um projeto React: o index.js (em uma instalação [Create-React-app] (/REACT-Create-React-app/)), envolvendo todos os componentes que serão criados no projeto:

ReactDOM. Render (
  <Router>
    <Form path="/"/>
    <PrivateArea path =  "/private-area"/>
  </Router>,
  document.getElementById('root')
)

O atributo path adicionado aos componentes define a URL para acessá-los. Nesse exemplo, ao acessar a URL localhost:3000/private-area/ do seu projeto vai mostrar o component <PrivateArea/>

O caminho ’/’ é a rota de índice e aparece quando você não define um URL/caminho ao lado do domínio do aplicativo. A Home Page, em outras palavras.

A rota default

Quando um usuário visita uma URL que não corresponda a nenhuma rota, por padrão, o REACH router redireciona para a rota ’/‘. Você pode adicionar uma rota default alternativa para tratar estes casos e exibir uma mensagem de “Página não encontrada” em vez disso.

<Router>
  <Form path =  "/"/>
  <PrivateArea path =  "/private-area"/>
  <NotFound default/>
</Router>

Alterar a rota programaticamente

Use a função `navigate para alterar programaticamente a rota em seu aplicativo:

import { navigate } from '@reach/router'
navigate ('/Private-Area ')

Use o componente Link para vincular suas rotas usando o JSX:

import { Link } from '@reach/router'

JSX

Home Área Restrita ```

Parâmetros de URL

Adicione parâmetros usando a sintaxe :param:

<Router>
  <User path="users/:userId"/>
</Router>

E, dentro deste componente de usuário hipotético, podemos obter o userId como um parâmetro (props):

const User = ({userId}) = > (
  <p>User {userId}</p>
)

Rotas aninhadas

Agora que você já sabe como definir rotas diretas no seu arquivo index.js desta forma:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area"/>
</Router>

Você pode definir rotas aninhadas:

<Router>
  <Form path="/"/>
  <PrivateArea path="/private-area" >
    <User path=":userId"/>
  </PrivateArea>
</Router>

Desta forma, é possível acessar o componente User com o parâmetro 123 através do link /private-area/123.

Você também pode optar por permitir que um componente defina suas próprias rotas dentro dela. Você usa o coringa ’/* ’ após a rota:

<Router>
  <Form path ="/"/>
  <PrivateArea path ="/private-area/* "/>
</Router>

Em seguida, dentro do componente você pode importar o router novamente, e definir seu próprio conjunto de sub-rotas:

component PrivateArea
<Router>
  <User path ="/:userId"/>
</router>

Qualquer rota usando ‘/private-area/qualquer-coisa’ será tratada pelo componente de usuário e a parte após a rota será enviada como seu parâmetro ’ userId ‘.

Para exibir algo na rota /private-areaagora você também precisa adicionar um manipulador/no componentePrivateArea`:

component PrivateArea
<Router>
  <User path="/:userId "/>
  <PrivateAreaDashboard path="/"/>
</Router>