Como construir um aplicativo de página única usando o React Router

Um aplicativo de página única (SPA) é um site ou aplicativo da web que reescreve dinamicamente uma página da web existente com novas informações do servidor da web.

Em um aplicativo React, os componentes recuperam o conteúdo do site e o renderizam em um único arquivo HTML em seu projeto.

O React Router ajuda você a navegar até o componente de sua escolha e o renderiza no arquivo HTML. Para usá-lo, você precisa saber como configurar e integrar o React Router ao seu aplicativo React.

Como instalar o roteador React

Para instalar o React Router em seu projeto React usando npm, o gerenciador de pacotes JavaScript, execute o seguinte comando no diretório do projeto:

npm i react-router-dom


Como alternativa, você pode baixar o pacote usando o Yarn, um gerenciador de pacotes que permite instalar pacotes de bibliotecas offline.

Para instalar o React Router usando o Yarn, execute este comando:

yarn add react-router-dom@6


Configurando o React Router

Para configurar o React Router e disponibilizá-lo em seu aplicativo, importe BrowserRouter de react -router-dom dentro de seu arquivo index.js e envolva seu componente de aplicativo no elemento BrowserRouter :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);


Envolver o componente do aplicativo no elemento BrowserRouter fornece a todo o aplicativo acesso total às habilidades do roteador.

Encaminhamento para Outros Componentes

Depois de configurar seu roteador em seu aplicativo, você deve criar os componentes do aplicativo, roteá-los e renderizá-los. O código a seguir importa e cria componentes denominados “Home”, “About” e “Blog”. Ele também importa os elementos Route e Routes de react-router-dom.

Você definirá suas Rotas dentro do componente App :

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Blog from './Blog';


function App() {
    return (
      <Routes>
        <Route path='/' element={ <Home /> } />
        <Route path='/about' element={ <About /> } />
        <Route path='/blog' element={ <Blog /> }/>
      </Routes>
    )
}

O componente App é o componente principal que renderiza todo o código que você escreveu em seus outros componentes.

O elemento Routes é o elemento pai que agrupa as rotas individuais que você cria em seu componente de aplicativo. O elemento Route cria uma única rota. São necessários dois atributos prop: um caminho e um elemento .

O atributo path define o caminho da URL do componente pretendido. A primeira rota no bloco de código acima usa uma barra invertida (/) como seu caminho. Esta é uma rota especial que o React renderizará primeiro, então o componente Home renderiza quando você executa seu aplicativo. Não confunda este sistema com a implementação de renderização condicional em seus componentes React. Você pode dar a esse atributo de caminho qualquer nome que desejar.

O atributo element define o componente que a Rota renderizará.

Trabalhando com o componente de link do roteador React

O componente de link é um componente do React Router usado para navegar em diferentes rotas. Esses componentes acessam as várias rotas que você criou.

Por exemplo:

import { Link } from 'react-router-dom';


function Home() {
    return (
      <div>
        <Link to='/about'>About page</Link>
        <Link to='/blog'>Blog page</Link>
        <h1>This is the Home Page<h1/>
      </div>
    )
}

export default Home;


O componente de link é quase idêntico à tag de âncora HTML <a> , apenas usa um atributo chamado “to” em vez de “href”. O componente de link navega para a rota com o nome de caminho correspondente como seu atributo e renderiza o componente da rota.

Roteamento aninhado e como implementá-lo

O React Router oferece suporte a roteamento aninhado, permitindo agrupar várias rotas em uma única rota. Isso é usado principalmente quando há alguma semelhança nos caminhos de URL das Rotas.

Depois de criar os componentes que deseja rotear, você desenvolverá rotas individuais para cada um deles no componente do aplicativo .

Por exemplo:

import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';


function App() {
    return (
      <Routes>
        <Route path='/article' element={ <Articles /> }/>
        <Route path='/article/new' element={ <NewArticle /> }/>
        <Route path='/article/1' element={ <ArticleOne /> }/>
      </Routes>
    )
}

export default App;


O bloco de código acima importa e roteia os componentes criados Articles , NewArticle e ArticleOne . Existem algumas semelhanças nos caminhos de URL entre as três rotas.

O nome do caminho da rota NewArticle começa igual ao nome do caminho da rota Articles , com uma barra invertida (/) adicionada e a palavra “new”, ou seja, (/new). A única diferença entre os nomes de caminho da rota Articles e da rota ArticleOne é a barra (/1) no final do caminho do componente ArticleOne .

Você pode aninhar as três rotas em vez de deixá-las em seu estado atual.

Igual a:

import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';


function App() {
    return (
      <Routes>
        <Route path='/article'>
          <Route index element={ <Articles /> }/>
          <Route path='/article/new' element={ <NewArticle /> }/>
          <Route path='/article/1' element={ <ArticleOne /> }/>
        </Route>
      </Routes>
    )
}

export default App;


Você envolveu as três rotas individuais em um único elemento de rota . Observe que o elemento Route pai possui apenas o atributo path e nenhum atributo de elemento que defina o componente a ser renderizado. O atributo index no primeiro elemento-filho da rota especifica que esta rota é renderizada quando você navega para o caminho da URL da rota -pai .

Para tornar seu código melhor e mais fácil de manter, você deve definir suas Rotas em um componente e importá-lo para o componente de aplicativo para uso.

Por exemplo:

import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';


function ArticleRoutes() {
    return (
      <Routes>
        <Route index element={ <Articles /> }/>
        <Route path='/article/new' element={ <NewArticle /> }/>
        <Route path='/article/1' element={ <ArticleOne /> }/>
      </Routes>
    )
}

export default ArticleRoutes;


O componente no bloco de código acima contém as rotas aninhadas que estavam anteriormente no componente app. Depois de criar o componente, você deve importá-lo para o componente de aplicativo e encaminhá-lo usando um único elemento Route .

Por exemplo:

import { Routes, Route } from 'react-router-dom';
import ArticleRoutes from './ArticleRoutes';


function App() {
    return (
      <Routes>
        <Route path='/article/*' element={ <ArticleRoutes /> }>
      </Routes>
    )
}

export default App;


No componente Route final , os símbolos de barra invertida e asterisco adicionados no final do nome do caminho do Route garantem que o nome do caminho corresponda a qualquer nome do caminho que comece com (/article) .

Há mais para React Router

Agora você deve estar familiarizado com o básico de como criar aplicativos de página única em React.js, usando o React Router.

Existem muitos outros recursos disponíveis na biblioteca do React Router que tornam a experiência do desenvolvedor mais dinâmica ao criar aplicativos da web.