🎯 Exemplo de Uso do React Router

Em poucas palavras

Definição técnica ou simplificada do conceito.

---

📝 Notas e Desenvolvimento

---

🔗 Conexões e Contexto

• Atlas: MdC - Programação
• Notas Relacionadas:

---

📚 Referências e Fontes

Links Externos

• Youtube
• Wikipedia

Citações Diretas

📂 Outros Conteúdos Preservados

Objetivo

Demonstrar e organizar uma série de exemplos de conceitos e métodos de ciclo de vida do React, utilizando o React Router para gerenciar a navegação entre eles em uma Aplicação de página única (SPA).

Solução

import React from 'react';
import { BrowserRouter as Router, Routes, Route, NavLink, Navigate } from 'react-router-dom';
import './App.css';
 
// Importe seus componentes de exemplo
import Exemplo1 from './examples/Exemplo1';
import Exemplo2 from './examples/Exemplo2';
import Exemplo3 from './examples/Exemplo3';
import Exemplo4 from './examples/Exemplo4';
import Cronometro from './examples/Cronometro';
 
// Array com a configuração de cada exemplo/rota
const examples = [
  {
    path: "/exemplo1",
    title: "Ex 1: getDerivedStateFromProps",
    description: "Demonstra como o estado de um componente de classe pode ser atualizado com base em novas props.",
    element: <Exemplo1 myName="Beltrano" />
  },
  {
    path: "/exemplo2",
    title: "Ex 2: componentDidMount",
    description: "Demonstra o método de ciclo de vida 'componentDidMount'.",
    element: <Exemplo2 />
  },
  {
    path: "/exemplo3",
    title: "Ex 3: componentDidUpdate",
    description: "Demonstra o método de ciclo de vida 'componentDidUpdate'.",
    element: <Exemplo3 />
  },
  {
    path: "/exemplo4",
    title: "Ex 4: componentWillUnmount",
    description: "Demonstra o método de ciclo de vida 'componentWillUnmount'.",
    element: <Exemplo4 />
  },
  {
    path: "/cronometro",
    title: "Cronômetro",
    description: "Um cronômetro simples usando setState.",
    element: <Cronometro />
  }
];
 
// Componente para renderizar a página de cada exemplo
function ExamplePage({ example }) {
  if (!example) {
    return <div>Selecione um exemplo no menu.</div>;
  }
 
  return (
    <div className="example-container">
      <p className="example-description">{example.description}</p>
      <div className="example-box">
        {example.element}
      </div>
    </div>
  );
}
 
// Componente principal da aplicação
function App() {
  return (
    <Router>
      <div className="App">
        <header className="App-header">
          <nav className="navigation-menu">
            <ul>
              {/* Mapeia o array 'examples' para criar os links de navegação */}
              {examples.map(ex => (
                <li key={ex.path}>
                  <NavLink to={ex.path} className={({ isActive }) => isActive ? "active" : ""}>
                    {ex.title}
                  </NavLink>
                </li>
              ))}
            </ul>
          </nav>
          <main className="example-content">
            <Routes>
              {/* Rota padrão que redireciona para o primeiro exemplo */}
              <Route path="/" element={<Navigate to={examples[0].path} />} />
              {/* Mapeia o array 'examples' para criar as rotas */}
              {examples.map(ex => (
                <Route
                  key={ex.path}
                  path={ex.path}
                  element={<ExamplePage example={ex} />}
                />
              ))}
            </Routes>
          </main>
        </header>
      </div>
    </Router>
  );
}
 
export default App;