# 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]] ([[Aplicação de página única|SPA]]).
# Solução
```jsx
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;
```