Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Problema com id

Referente ao curso React Router: navegação em uma SPA, no capítulo Rotas aninhadas e atividade Exibindo Categoria

por João Pedro Sacrato de Oliveira
| 131.9k xp | 13 posts

Estou com um problema o id do meu código aparece como undefined no F12 do navegador, segue código da Categoria.jsx e do ListaPost.jsx

import React from "react";
import { useParams, Route, useRouteMatch } from "react-router-dom";
import "../assets/css/blog.css";
import ListaCategorias from "../components/ListaCategorias";
import ListaPost from "../components/ListaPost";

const Categoria = () => {
  const { idDaCategoria } = useParams();
  const { path } = useRouteMatch();

  return (
    <>
      <div className="container">
        <h2 className="titulo-pagina">Pet Notícias</h2>
      </div>
      <ListaCategorias />
      <Route exact to={`${path}`}>
        <ListaPost url={`/posts?categoria=${idDaCategoria}`} />
      </Route>
    </>
  );
};

export default Categoria;
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { busca } from "../api/api";

function ListaPost({ url }) {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    busca(url, setPosts);
  }, [url]);

  return (
    <section className="container posts">
      {posts.map((post) => (
        <Link
          className={`cartao-post cartao-post--${post.categoria}`}
          to={`/posts/${post.id}`}
        >
          <article>
            <h3 className="cartao-post__titulo">{post.title}</h3>
            <p className="cartao-post__meta">{post.metadescription}</p>
          </article>
        </Link>
      ))}
    </section>
  );
}

export default ListaPost;

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

5 respostas
por João Pedro Sacrato de Oliveira
| 131.9k xp | 13 posts

Outra duvida, o que significa os simbolos ? e = em:

{`/posts?categoria=${idDaCategoria}`}
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala João, tudo bem? Espero que sim!

Poderia mandar o código de ListaCategorias por favor?

E esse ?nome= significa um parâmetro que estamos passando para a url, com ? iniciamos o parâmetro, logo após vem o nome do parametro e passamos o valor desse parâmetro após o simbolo de igualdade.

Aguardo o retorno :D

solução!
por João Pedro Sacrato de Oliveira
| 131.9k xp | 13 posts

Eae Mateus, bom dia. Encontrei o erro estava faltando o :id no App.js Mas por que eu não poderia apenas inicializar com {/posts/categoria/${idDaCategoria} ?

import React from "react";
import "./assets/css/base/base.css";
import Home from "./paginas/Home";
import Sobre from "./paginas/Sobre";
import Cabecalho from "./components/Cabecalho";
import Posts from "./components/Posts";
import Pagina404 from "./paginas/Pagina404";
import Categoria from "./paginas/Categoria";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Cabecalho />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/sobre">
          <Sobre />
        </Route>
        <Route path="/categoria/:id">
          <Categoria/>
        </Route>
        <Route path="/posts/:id">
          <Posts />
        </Route>
        <Route>
          <Pagina404 />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Não entendi muito bem, poderia detalhar sua dúvida?

por João Pedro Sacrato de Oliveira
| 131.9k xp | 13 posts

eu entendi agora, com o ?categoria= estamos filtrando os resultados dentro do db.json, já que entrando em "http://localhost:5000/posts?categoria=bem-estar" mostra um array onde todas as categorias possuem como parametro "bem-estar"