Artigo original: Learn React Router in 5 Minutes - A Beginner's Tutorial

Importante: a versão mais recente do React Router, versão 6, faz várias alterações ao pacote. Algumas das instruções deste artigo podem já não ser válidas, dependendo da versão do pacote que você utiliza. Consulte a documentação (em inglês) para ver mais detalhes.

Por vezes, temos apenas uns 5 minutos de nossa vida à disposição. Em vez de desperdiçar esse tempo nas redes sociais, que tal ver uma apresentação de uns 5 minutos sobre o React-Router? Neste tutorial, vamos aprender o básico sobre roteamento no React para criar a navegação para um site da web com uma loja de tricô para o Scrimba. Não é de verdade, mas quem sabe um dia... ;)

Se quiser uma apresentação adequada sobre esse assunto, você pode se inscrever na lista de espera do meu curso avançado de React que está por vir (em inglês). Se ainda for um iniciante, confira meu curso introdutório sobre React (em inglês).

O que é o react-router, então?

Muitos sites da web modernos são de página única, mas parecem ser de várias páginas por conterem componentes que são renderizados como páginas separadas. Eles geralmente são conhecidos como SPAs - single-page applications, em inglês. No seu centro, o que o React Router faz é renderizar condicionalmente determinados componentes para exibir, dependendo da rota que está sendo usada no URL (/ para a página inicial, /about para a página de informações etc.).

Por exemplo, podemos usar o React Router para conectar com www.knit-with-scrimba.com/, www.knit-with-scrimba.com/about ou www.knit-with-scrimba.com/shop

Parece ótimo - como usamos isso?

Para usar o React Router, primeiro, você precisa instalá-lo usando o NPM:

npm install react-router-dom

Como opção, você pode usar esse playground no Scrimba, que tem o código completo já escrito.

Você precisará importar BrowserRouter, Route e Switch do pacote react-router-dom:

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

No meu exemplo, eu faço o link da página de entrada com duas outras "páginas" (que são, de fato, apenas componentes) chamados Shop e About.

Primeiro, você precisará configurar sua aplicação para que funcione com o React Router. Tudo que é renderizado precisará estar dentro do elemento <BrowserRouter>, então envolva seu App como essas tags primeiro. É o componente que faz toda a lógica de exibir os vários componentes que você fornece.

// index.js
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
)

Em seguida, no seu componente App, adicione o elemento Switch (tags de abertura e de fechamento). Elas garantem que apenas um componente seja renderizado por vez. Se não usar isso, poderá ter como padrão o componente  Error, que escreveremos depois.

function App() {
    return (
        <main>
            <Switch>
                
            </Switch>
        </main>
    )
}

Agora, é o momento de adicionar suas tags <Route>. Esses são os links entre os componentes e devem ser colocados entre as tags <Switch>.

Para informar às tags <Route> quais componentes elas devem carregar, basta adicionar um atributo path e o nome do componente que você quer carregar com o atributo component.

<Route path='/' component={Home} />

Muitos URLs de página inicial são o nome do site seguido por  "/" - por exemplo, www.knit-with-scrimba.com/. Neste caso, adicionamos exact à tag Route. Isso se dá em função de outros URLs também contiverem "/". Desse modo, se não dissermos à aplicação que ela precisa procurar somente por /, ela carregará a primeira correspondência da rota, nos deixando com um bug bem complicado de lidar.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
            </Switch>
        </main>
    )
}

Em seguida, importe os componentes na aplicação. Você pode querer tê-los em uma pasta "components" separada para manter o código limpo e legível.

import Home from './components/Home';
import About from './components/About';
import Shop from './components/Shop';

Passemos à mensagem de erro que mencionei anteriormente, que carrega se o usuário digitar um URL incorreto. Ela é simplesmente uma tag <Route> normal, mas sem o 'path'. O componente Error contém <h1>Oops! Page not found!</h1> (algo como 'Opa, não encontrei essa página'). Não se esqueça de importá-la na aplicação.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
                <Route component={Error} />
            </Switch>
        </main>
    )
}

Até o momento, nosso site é navegável apenas digitando o URLs. Para adicionar links clicáveis ao site, usamos o elemento Link do React Router e configuramos um novo componente Navbar. Mais uma vez, não se esqueça de importar o novo componente na aplicação.

Agora, adicione um Link para cada componente na aplicação e use to="URL" para fazer a ligação com os URLs mencionados.

function Navbar() {
  return (
    <div>
      <Link to="/">Home </Link>
      <Link to="/about">About Us </Link>
      <Link to="/shop">Shop Now </Link>
    </div>
  );
};

Seu site agorá terá links clicáveis, permitindo que você navegue por nossa aplicação de página única!

Conclusão

Era isso. Se quiser navegar facilmente por uma aplicação em React, esqueça as tags de âncora e adicione o React Router. É limpo, organizado e torna adicionar e excluir páginas muito mais fácil.

Para aprender mais sobre hooks e outros grandes recursos do React, inscreva-se na lista de espera do meu curso avançado de React que está por vir (em inglês).

Se busca algo mais adequado aos iniciantes, confira meu curso introdutório sobre React (em inglês).

Feliz programação ;)