React Router

O que é React Router?

Usamos rotas para navegar entre diferentes páginas(estados) de uma aplicação, quando precisamos desse fluxo no React podemos usar o pacote chamado React Router que resolve especificamente esse problema.

Vamos aproveitar parte do projeto que criamos na seção React e aplicar rotas nele, porém iremos realizar as seguintes alterações:

• Nossa aplicação agora terá quatro páginas: react, hooks, js e home;

• A página home vai conter três links onde cada um apontará para uma página diferente;

• Cada página terá um botão que volta pra página home;

Antes de iniciar as alterações acima vamos executar o comando abaixo para instalar o pacote do react-router:

npm install --save react-router-dom

Usando o <BrowserRouter />

Após instalar a biblioteca de rotas temos acesso a diversos componentes disponíveis para criarmos nossas rotas. O primeiro componente que vamos usar é o <BrowserRouter /> que é basicamente responsável por informar em que ponto da nossa aplicação inicia nossas rotas, vamos usá-lo no nosso componente <App /> que sofreu algumas alterações conforme mostrado abaixo:

import React from "react";
import { BrowserRouter } from "react-router-dom";

export const App = () => {
  return (
    <BrowserRouter>
      <div className="app">

      </div>
    </BrowserRouter>
  );
};

Usando o <Switch /> e o <Route />

Agora vamos importar o componente <Switch /> que serve para controlar a troca de rotas e o <Route /> para criar a própria rota, esse componente recebe alguns atributos, vamos falar sobre três específicos que usaremos na nossa aplicação:

1. path: recebe um texto que define a rota onde o componente será apresentado, então o caminho path="/react" referencia a página do react quando usarmos /react na nossa url.

2. component: recebe o componente que será apresentado no caminho que foi definido no path.

3. exact: usamos quando temos várias rotas iniciadas com o mesmo valor, no nosso caso temos a rota / que aponta pra página home porém as outras rotas também iniciam com /, para que o algoritimo aponte pra home apenas quando a rota for / precisamos usar a palavra reservada exact

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";

// aqui importamos nossas páginas
import { HooksPage } from "./HooksPage";
import { JsPage } from "./JsPage";
import { ReactPage } from "./ReactPage";
import { Home } from "./Home";

export const App = () => {
  return (
    <BrowserRouter>
      <div className="app">
        <Switch>
          {/* aqui definimos a rota e a page que será apresentada */}
          <Route path="/" exact component={Home} />
          <Route path="/hooks" component={HooksPage} />
          <Route path="/js" component={JsPage} />
          <Route path="/react" component={ReactPage} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

Usando o <Link />

Com todas as rotas definidas e criadas, agora vamos usar outro componente chamado <Link />, ele recebe a propriedade to que recebe um texto como valor, esse valor precisa ser o mesmo definido no atribudo path da rota. Usaremos o <Link /> na página home onde teremos os links que apontam para as outras páginas.

import React from "react";

import { Message } from "./Message";
import { Link } from "react-router-dom";

export const Home = () => {
  return (
    <div>
      <Message name="World" />
      <nav className="nav">

         {/* aqui o link pra cada page */}
        <Link to="/react" className="nav-link">
          React
        </Link>
        <Link to="/js" className="nav-link">
          Javascript
        </Link>
        <Link to="/hooks" className="nav-link">
          Hooks
        </Link>
      </nav>
    </div>
  );
};

E por último temos um link em cada página que aponta pra home veja no exemplo da página hooks e aqui está o link da nossa aplicação.

import React from "react";
import { Link } from "react-router-dom";

import { Figure } from "./Figure";
import { Message } from "./Message";

import hooksImage from "./assets/img/hooks.png";

export const HooksPage = () => (
  <div>
    <Figure src={hooksImage} alt="Hooks" />
    <Message name="Hooks" />
    <Link to="/" className="nav-link">
      Go Home
    </Link>
  </div>
);

Referências

• Roteamento no React com os poderes do React Router v4

• REACT – CONFIGURANDO ROTAS COM REACT-ROUTER

• React Router docs