[Projeto] API E ROUTER

Olá, Julia, como vai?

Para separar as informações de uma API de acordo com cada página, vou te mostrar um exemplo usando React. Se você estiver utilizando outra abordagem ou biblioteca, é só comentar aqui que ajustamos a solução.

Exemplo com React e React Router

Com React, podemos usar o React Router para criar rotas dinâmicas e filtrar as informações da API com base nos parâmetros da URL. Você pode fazer isso da seguinte forma:

1 - Primeiro, instale o React Router:

   npm install react-router-dom

2 - Em seguida, configure as rotas no seu projeto:

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

const App = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/pagina/:id" element={<Pagina />} />
    </Routes>
  </BrowserRouter>
);

const Pagina = () => {
  const { id } = useParams(); // Obtém o ID da URL
  const [item, setItem] = React.useState(null);

  useEffect(() => {
    fetch('https://suaapi.com/dados') // Chamada à API
      .then(response => response.json())
      .then(data => {
        const itemFiltrado = data.find(dado => dado.id === parseInt(id));
        setItem(itemFiltrado);
      });
  }, [id]);

  if (!item) {
    return <h1>Carregando ou item não encontrado...</h1>;
  }

  return (
    <div>
      <h1>{item.name}</h1>
      <p>Detalhes: {item.description}</p>
    </div>
  );
};

export default App;

O que acontece nesse exemplo:

• O React Router define as rotas com parâmetros dinâmicos (/pagina/:id).
• O componente Pagina utiliza o parâmetro id para filtrar os dados retornados pela API.
• Uma mensagem é exibida enquanto os dados estão carregando ou caso o item não seja encontrado.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)