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 seu 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 NavegadorRoteador de react-router-dom dentro do seu index.js arquivo e, em seguida, envolva o componente do aplicativo no NavegadorRoteador elemento:

importar Reagir de'reagir';
importar ReactDOM de'react-dom/client'; 
importar Aplicativo de'./Aplicativo';
importar { Navegador Roteador } de'react-router-dom';
const root = ReactDOM.createRoot( documento.getElementById('raiz') );
root.render(


 </BrowserRouter>
);

Envolvendo o componente do aplicativo no NavegadorRoteador O elemento 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". Também importa o Rota e Rotas elementos de react-router-dom.

Você definirá suas Rotas dentro do Aplicativo componente:

importar { Rotas, Rota } de'react-router-dom';
importar Lar de'./Lar';
importar Sobre de'./Sobre';
importar blog de'./Blog';
funçãoAplicativo() {
retornar (

'/' elemento={ } />
'/sobre' elemento={ } />
'/blog' elemento={ }/>
 </Routes>
 )
}
exportarpadrão Aplicativo;

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

O Rotas element é o elemento pai que envolve as rotas individuais que você cria em seu componente de aplicativo. O Rota O elemento cria uma única rota. Leva dois atributos prop: um caminho e um elemento.

O caminho O atributo 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 irá renderizar primeiro, então o Lar componente renderiza quando você executa seu aplicativo. Não confunda este sistema com implementando renderização condicional em seus componentes React. você pode dar isso caminho atribuir qualquer nome que você gosta.

O elemento O atributo define o componente que o Rota vai renderizar.

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

Por exemplo:

importar { Link } de'react-router-dom';
funçãoLar() {
retornar (



'/sobre'>Sobre a página</Link>
'/blog'>Página do blog</Link>
Esta é a página inicial
 </div>
 )
}
exportarpadrão Lar;

O link componente é quase idêntico à tag âncora HTML, ele apenas usa um atributo chamado "to" em vez de "href". O link O componente navega para a rota com o nome do 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 aplicativo componente.

Por exemplo:

importar { Rotas, Rota } de'react-router-dom'; 
importar Artigos de'./Artigos';
importar Novo artigo de'./Novo artigo';
importar Artigo Um de'./ArtigoUm';
funçãoAplicativo() {
retornar (

'/artigo' elemento={ }/>
'/artigo/novo' elemento={ }/>
'/Artigo 1' elemento={ }/>
 </Routes>
 )
}
exportarpadrão Aplicativo;

O bloco de código acima importa e roteia os componentes criados Artigos, Novo artigo, e Artigo Um. Existem algumas semelhanças nos caminhos de URL entre as três rotas.

O Novo artigo O nome do caminho da rota começa igual ao Artigos Nome do caminho da rota, com uma barra invertida adicionada (/) e a palavra "novo", ou seja, (/novo). A única diferença entre os nomes dos caminhos dos Artigos Rota e o Artigo Um A rota é a barra (/1) no final do Artigo Um nome do caminho do componente.

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

Igual a:

importar { Rotas, Rota } de'react-router-dom';
importar Artigos de'./Artigos';
importar Novo artigo de'./Novo artigo';
importar Artigo Um de'./ArtigoUm';
funçãoAplicativo() {
retornar (

'/artigo'>
 }/>
'/artigo/novo' elemento={ }/>
'/Artigo 1' elemento={ }/>
 </Route>
 </Routes>
 )
}
exportarpadrão Aplicativo;

Você envolveu as três Rotas individuais em uma única Rota elemento. Observe que o pai Rota elemento só tem o caminho atributo e não elemento atributo que define o componente a ser renderizado. O índice atributo no primeiro filho Rota elemento especifica que este Rota renderiza quando você navega para o caminho da URL do pai Rota.

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

Por exemplo:

importar { Rotas, Rota } de'react-router-dom';
importar Artigos de'./Artigos';
importar Novo artigo de'./Novo artigo';
importar Artigo Um de'./ArtigoUm';
funçãoArtigoRotas() {
retornar (

 }/>
'/artigo/novo' elemento={ }/>
'/Artigo 1' elemento={ }/>
 </Routes>
 )
}
exportarpadrão ArtigoRotas;

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 aplicativo componente e roteá-lo usando um único Rota elemento.

Por exemplo:

importar { Rotas, Rota } de'react-router-dom';
importar ArtigoRotas de'./ArticleRoutes';
funçãoAplicativo() {
retornar (

'/artigo/*' elemento={ }>
 </Routes>
 )
}
exportarpadrão Aplicativo;

Na final Rota componente, os símbolos de barra invertida e asterisco adicionados no final do nome do caminho da rota garantem que o nome do caminho corresponda a qualquer nome de caminho que comece com (/artigo).

Há mais no 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.