Scribd
Carregar
20 visualizações4 páginas

Criando Páginas com React Router

O documento fornece um guia passo a passo para adicionar páginas a um aplicativo React usando React Router. As etapas incluem a instalação do React Router, a criação de uma página HTML, a configuração das rotas no App.jsx e a separação da página inicial em um novo componente. O resultado final permite que os usuários naveguem para a página HTML ao clicar em um botão.

Enviado por

gicarolinecstd
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
20 visualizações4 páginas

Criando Páginas com React Router

O documento fornece um guia passo a passo para adicionar páginas a um aplicativo React usando React Router. As etapas incluem a instalação do React Router, a criação de uma página HTML, a configuração das rotas no App.jsx e a separação da página inicial em um novo componente. O resultado final permite que os usuários naveguem para a página HTML ao clicar em um botão.

Enviado por

gicarolinecstd
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

ChatGPT

Perfeito! Bora adicionar páginas aos botões! 😄


Vamos fazer isso de forma simples e passo a passo, começando pelo botão HTML.

🛠️ Etapa 1: Instalar o React Router


Para navegar entre páginas no React, a gente usa uma biblioteca chamada React Router.

No terminal, digite:

bash

npm install react-router-dom

📁 Etapa 2: Criar a página HTML


Crie um novo arquivo em src/pages/[Link] com o conteúdo:

jsx

// src/pages/[Link]
function HtmlPage() {
return (
<div className="p-8 font-silkscreen text-center">
<h1 className="text-3xl text-orange-500 mb-4">Página de HTML</h1>
<p>Aqui você vai aprender os fundamentos do HTML!</p>
</div>
)
}

export default HtmlPage

1/4
🧭 Etapa 3: Configurar as rotas
Agora vamos ajustar o [Link] pra usar o React Router.

1. Importe os componentes do react-router-dom :

js

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'

2. Importe sua nova página:

js

import HtmlPage from './pages/HtmlPage'

3. Altere seu componente App para isso:

jsx

function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/html" element={<HtmlPage />} />
</Routes>
</Router>
)
}

🏠 Etapa 4: Separar a Home


Agora criamos um novo componente para a página inicial.

Crie src/pages/[Link] :

jsx

2/4
import devhacksLogo from '../assets/[Link]'
import { Link } from 'react-router-dom'

function Home() {
return (
<>
{/* LOGO */}
<div>
<a href="[Link] target="_blank">
<img src={devhacksLogo} alt="DevHacks Logo" className="block mx-auto w-
[100] h-[100px] mb-15"/>
</a>
</div>

<div className="flex justify-between items-start w-full px-8 mt-8">

{/* Front-End */}


<div className="flex-col gap-4 items-center text-center font-silkscreen
space-y-2 mb-10">
<h2 className="h2-front text-blue-500">Front-End</h2>
<Link to="/html"><button className="btn-hack">HTML</button></Link>
<button className="btn-hack">CSS</button>
<button className="btn-hack">JavaScript</button>
<button className="btn-hack">Tailwind</button>
</div>

{/* Back-End */}


<div className="flex-col gap- items-center text-center font-silkscreen
space-y-2">
<h2 className="h2-back text-green-500">Back-End</h2>
<button className="btn-hack">[Link]</button>
<button className="btn-hack">Express</button>
<button className="btn-hack">MongoDB</button>
<button className="btn-hack">SQL</button>
</div>
</div>

{/* Frases */}


<h1 className="text-[20px] font-bold text-center text-orange-500 font-
silkscreen mb-4">
DEV HACKS - FACILITANDO O APRENDIZADO!
</h1>

3/4
<p className="read-the-docs font-silkscreen text-center">
DEVELOPED BY GIOVANNA CAROLINE ©
</p>
</>
)
}

export default Home

🎉 Resultado:
Agora quando você clicar em HTML, ele vai te levar pra /html , onde aparece a página
HTML que você criou.

Quer que eu te ajude a fazer a próxima (tipo CSS ou JavaScript)?


Ou prefere testar essa primeiro e ir devagar? 😄

4/4

Você também pode gostar