Criação de uma barra de navegação no React

Com o passar dos anos, as barras de navegação, ou barras de navegação, se tornaram um recurso básico na construção de sites. Eles realmente são úteis para navegar em um site.

Neste tutorial, veremos os fundamentos da construção de barras de navegação no React. Vamos construir uma barra de navegação fixada no topo da página, e o usuário poderá alternar entre as páginas da web como você faria em um painel, por exemplo. Em seguida, colocaremos todas as nossas novas habilidades em prática construindo um aplicativo de amostra ao vivo.

Nosso aplicativo de amostra é uma galeria de animais que usaremos para ver algumas fotos de diferentes tipos de animais após clicarmos no botão nome do animal na barra de navegação.

Instalação

Vamos direto ao código. Para criar um aplicativo React, certifique-se de ter o Node.js instalado em seu computador. Se você não construiu um aplicativo React antes, pode verificar se tem o Node.js instalado digitando o seguinte em seu terminal:

node-v

Caso contrário, vá para o Node. js site para baixar a versão mais recente .

Feito isso, podemos obter começamos com nosso aplicativo React executando este comando:

npx create-react-app nav-bar

Em seguida, navegamos em nossa pasta de projeto no terminal:

cd nav-bar

Setting a biblioteca React Router

Usando a biblioteca React Router em nosso aplicativo nos permite navegar entre diferentes páginas ou componentes no React, e realmente faz essas alterações no URL de cada página ou componente. Na verdade, ele também pode lidar com funcionalidades mais complexas, como a passagem de dados entre páginas por meio de consultas e rotas aninhadas-mas isso está além do escopo deste artigo.

Para este exemplo, precisaremos apenas instalar o Biblioteca React Router para nos ajudar a alternar as visualizações dos animais em nosso aplicativo quando clicamos no nomes de animais nos links.

npm install react-router-dom

Primeiro, construiremos o próprio navbar. Para fazer isso, criaremos um arquivo denominado navbar.js em src/components/navbar:

import React from’react’; importar {Link} de”react-router-dom”; const navbar=()=> {return (

); } exportar barra de navegação padrão;

Temos que importar o Link da biblioteca react-router-dom que já instalamos. sai da caixa da biblioteca React Router para nos permitir navegar até o nome da rota exata no atributo to. O que ele faz é converter tudo o que está dentro do atributo (texto, imagens, etc.) em um link. Ao clicar nele, você é levado para a rota que já está indicada no atributo to.

Criando os links individuais para atributos

De volta ao nosso exemplo-temos o nome do nosso animais listados no atributo to, e cada nome será vinculado à página do animal correspondente. Agora, vamos criar o componente para os animais que listamos em nossa barra de navegação.

Vamos colocá-los em src/pages/navbar, assim:

Dogs.js

import React from’react’; const Dogs=()=> {return (

); } exportar cachorros padrão; Dogs.js

Cats.js

import React de’react’; const Cats=()=> {return (

); } exportar gatos padrão; Cats.js

Sheeps.js

import React de’react’; const Sheeps=()=> {return (

); } exportar ovelhas padrão; Sheep.js

Goats.js

import React de’react’; const Goats=()=> {return (

); } exportar cabras padrão; Goat.js

Você notará que o código é o mesmo para cada página do animal.

Agora, vá para o App.js e importe react-router-dom para o seu projeto:

importar’./App.css’; import {BrowserRouter as Router, Switch, Route} de”react-router-dom”; import navbar de”./components/navbar”import Dogs from”./pages/Dogs”import Cats from”./pages/Cats”import Sheeps from”./pages/Sheeps”import Goats from”./pages/Goats”function App () {return ( ); } exportar aplicativo padrão;

Ao importar react-router-dom, você pode escolher importar as coisas específicas de que precisamos. Aqui, vamos importar BrowserRouter (que renomeamos Router para maior clareza), Switch para nos ajudar a mover entre uma página por vez e Route para definir cada caminho e seu componente ou página relacionado. Por padrão, assim que a página é carregada, o usuário é levado ao componente com o caminho vazio * path *=’/’. Em nosso caso, o usuário é inicialmente enviado para Dogs.js.

navbar está fora de nosso Switch porque queremos que ele fique no topo de nossa página permanentemente, então não é afetado quando alternamos entre diferentes componentes animais.

Verificando nossos resultados

Vamos iniciar o servidor para ver nosso produto final. Basta executar o comando abaixo:

npm start

Vamos recapitular rapidamente o que fizemos. Primeiro, usamos Create React App para iniciar o projeto e, em seguida, instalamos a biblioteca react-router-dom. Depois de fazer isso em nosso projeto, construímos a própria barra de navegação e o componente para cada animal também foi adicionado.

Finalmente, entramos em nosso App.js e conectamos os nomes da barra de navegação aos correspondentes componente usando nosso roteador react.

Conclusão

Parabéns, você construiu com sucesso sua primeira navbar no React. Você pode encontrar o projeto de amostra em meu GitHub . Embora um roteamento mais complexo seja possível com nossa barra de navegação, isso deve ser suficiente para lidar com um roteamento simples entre diferentes componentes por meio de uma barra de navegação.