Como Manipular Rotas no React

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

No tutorial anterior, começamos a trabalhar com React e JSX. Nesse, veremos como preparar e criar um app em React. Focaremos na manipulação de rotas no app em React, usando react-router.

Começando

Comecemos iniciando nosso projeto usando o Administrador de Pacotes do Node (npm).

mkdir reactRoutingApp
cd reactRoutingApp
npm init

Instalemos as bibliotecas react e react-dom no projeto.

npm install react react-dom --save

Usaremos o empacotador de módulos webpack nesse projeto. Instalemos webpack e o servidor de desenvolvimento dele.

npm install webpack webpack-dev-server --save-dev

Usaremos Babel para converter JSX em JavaScript. Instelamos o pacote abaixo em nosso projeto.

npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

webpack-dev-server requer um arquivo de configuração onde definiremos nossos arquivos de entrada, saída e o carregador do babel. Eis como webpack.confing.js parece:

module.exports = {
    entry: './app.js',
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    output: {
        filename: 'bundle.js'
    }
};

Agora, criaremos app.html onde o app em React será renderizado.

<html>
    <head>
        <title>TutsPlus - React Routing Basic</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

Criemos o arquivo de entrada app.js, para o app em React.

import React from 'react';
import {render} from 'react-dom';

const App = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Routing Basic!'}</h2>
    );
};

render(
    <App />,
    document.getElementById('app')
);

Como vimos acima, importamos react e react-dom. Criamos um componente estático chamado App que retorna um título. A função render renderiza o componente dentro do elemento app na página app.html.

Iniciemos o server do webpack e o app deve começar a executar, e mostrar a mensagem do componente.

webpack-dev-server

Use o navegador e acesse http://localhost:8080/app.html e devemos ver o app funcionando.

Criando Visões do React

Agora, já começamos nossa app em React. É hora de criar algumas visões para nossa aplicação de roteamento em React. Para ser simples, criaremos todos os componentes dentro do arquivo app.js.

Criemos um componente principal chamado navigation no app.js.

const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>{'Contact'}</li>
                <li>{'About'}</li>
            </ul>
        </section>
    );
};

No componente Navigation acima, temos o título do app e um menu recém criado para navegar pelas diferentes telas do app. O componente é bem simples, com HTML básico. Agora, criemos as telas para Contact e About.

const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
        </section>
    );
};

Acabamos de criar um componente para renderizar as telas About e Contact.

Conectando Visões Usando react-router

Para conectar as diferentes visões, usaremos o react-router. Instalaremos react-router usando npm.

npm install react-router --save

Importemos o react-router no app.js.

import {Link, Route, Router} from 'react-router';

Ao invés de especificar qual componente renderizar, definiremos rotas diferentes para nossa aplicação. Para isso, usaremos o react-router.

Definamos as rotas para as telas Home, Contact e About.

render(
    <Router>
        <Route
            component={Navigation}
            path="/"
        />
        <Route
            component={About}
            path="/about"
        />
        <Route
            component={Contact}
            path="/contact"
        />
    </Router>,
    document.getElementById('app')
);

Quando o usuário visitar a rota /, o componente Navigation será renderizado, ao visitar /about o componente About será renderizado e ao visitar /contact será a vez de Contact.

Modifiquemos as telas About e Contact para adicionar um link para Home. Para relacionar telas, usaremos Link, que funciona parecido com âncoras do HTML.

const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

Modifiquemos o componente Navigation para incluir links para outras telas na tela inicial.

const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>
                    <Link to="/contact">{'Contact'}</Link>
                </li>
                <li>
                    <Link to="/about">{'About'}</Link>
                </li>
            </ul>
        </section>
    );
};

Salve as mudanças e reinicie o servidor do webpack.

webpack-dev-server

Acesse http://localhost:8080/app.html e veremos o app executando com roteamento básico implementado.

Resumindo

Nesse tutorial, vimos como iniciar a criação de um app em React e como conectar componentes diferentes usando react-router. Aprendemos como definir rotas e ligá-las usando react-router.

Você já usou react-router ou alguma outra biblioteca de roteamento? Compartilhe conosco suas ideias nos comentários abaixo.

Código fonte do tutorial disponível no GitHub.