Personalizar preferências de consentimento

Utilizamos cookies para ajudar você a navegar com eficiência e executar certas funções. Você encontrará informações detalhadas sobre todos os cookies sob cada categoria de consentimento abaixo.

Os cookies que são classificados com a marcação “Necessário” são armazenados em seu navegador, pois são essenciais para possibilitar o uso de funcionalidades básicas do site.... 

Sempre ativo

Os cookies necessários são cruciais para as funções básicas do site e o site não funcionará como pretendido sem eles.

Esses cookies não armazenam nenhum dado pessoalmente identificável.

Sem cookies para exibir.

Cookies funcionais ajudam a executar certas funcionalidades, como compartilhar o conteúdo do site em plataformas de mídia social, coletar feedbacks e outros recursos de terceiros.

Sem cookies para exibir.

Cookies analíticos são usados para entender como os visitantes interagem com o site. Esses cookies ajudam a fornecer informações sobre métricas o número de visitantes, taxa de rejeição, fonte de tráfego, etc.

Sem cookies para exibir.

Os cookies de desempenho são usados para entender e analisar os principais índices de desempenho do site, o que ajuda a oferecer uma melhor experiência do usuário para os visitantes.

Sem cookies para exibir.

Os cookies de anúncios são usados para entregar aos visitantes anúncios personalizados com base nas páginas que visitaram antes e analisar a eficácia da campanha publicitária.

Sem cookies para exibir.

Blog

Como criar navegação entre páginas no React.js

Como criar navegação entre páginas no React.js React

A navegação entre páginas é essencial em qualquer projeto web. No React, esse processo é simplificado com bibliotecas como o react-router-dom, que permite criar rotas dinâmicas e uma navegação fluida. Neste post, vou mostrar como configurar um sistema básico de navegação entre páginas usando o React.

O que Vamos Fazer?

Neste tutorial, você aprenderá:

  • A instalar o react-router-dom.
  • A configurar as rotas do seu projeto.
  • A criar um menu para alternar entre páginas.

Pré-requisitos

Antes de começar, você precisa de:

  • Conhecimentos básicos de React.
  • Um projeto React criado com create-react-app ou similar.

Passo a Passo

1. Instalando o React Router Dom
No terminal do seu projeto, execute:

npm install react-router-dom

2. Configurando as Rotas
No arquivo App.js, importe os componentes necessários e defina as rotas:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}

export default App;

3. Criando as Páginas
Crie uma pasta chamada pages no diretório do seu projeto. Dentro dela, crie os arquivos Home.js, About.js, e Contact.js.

Exemplo de uma página:

// pages/Home.js
import React from 'react';

function Home() {
return <h1>Bem-vindo à Página Inicial!</h1>;
}

export default Home;

4. Criando o Menu de Navegação
Adicione o menu no topo do seu aplicativo:

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

function Header() {
return (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">Sobre Nós</Link></li>
<li><Link to="/contact">Contato</Link></li>
</ul>
</nav>
);
}

export default Header;

Importe o Header no seu App.js:

import Header from './components/Header';

function App() {
return (
<Router>
<Header />
<Routes>
{/* Suas rotas aqui */}
</Routes>
</Router>
);
}

5. Testando
Inicie o servidor de desenvolvimento:

npm start

Agora você tem uma aplicação React com navegação funcional!

Conclusão

Com apenas alguns passos, você aprendeu a criar uma navegação entre páginas no React. Experimente adicionar mais páginas e estilos para personalizar seu projeto.

Compartilhe:



Ícone de orcamento da Geovani Assis
Newsletter

Cadastre-se e receba
informações e ofertas exclusivas

    Logo Whatsapp