Roteamento e busca de dados

Navegue entre páginas com React Router e busque dados de API com fetch + loading/error states.

O que você vai aprender

• React Router v6
• Rotas e Link
• fetch + async
• Loading e erro

1. Instalar Router

npm install react-router-dom

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/sobre">Sobre</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/sobre" element={<Sobre />} />
      </Routes>
    </BrowserRouter>
  );
}

2. Buscar dados

function Posts() {
  const [data, setData] = useState(null);
  const [err, setErr] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
      .then((r) => r.json())
      .then(setData)
      .catch((e) => setErr(e.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Carregando…</p>;
  if (err) return <p>Erro: {err}</p>;
  return (
    <ul>{data.map((p) => <li key={p.id}>{p.title}</li>)}</ul>
  );
}

Sumário do curso