Entrar Ainda não tem acesso?
2
respostas

post nao renderiza

Referente ao curso React Router: navegação em uma SPA

por Andressa Oliveira
| 431.4k xp | 32 posts
Gerente de Tenologia e Inovação

O conteudo do post nao esta sendo renderizado, a url muda http://localhost:3000/posts/2 mas nao aparece a noticia Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Abaixo o codigo do ListaPost.jsx

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

const ListaPost = ({url}) => {
  const [posts, setPost] = useState([]);

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


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

      })}
    </section>
  );
};

export default ListaPost;

e Post.jsx

import React, { useEffect, useState,useNavigate } from "react";
import { useParams } from "react-router-dom";
import { busca } from "../api/api";
import "../assets/css/post.css";

const Post = () => {
    let navigate = useNavigate();
  const { id } = useParams();
  const [post, setPost] = useState({});

  useEffect(() => {
    busca(`/posts/${id}`, setPost)
    .catch(()=>{
navigate.push('/404')
    });
  }, [id]);

  return (
    <main className="container flex flex-container--centro">
      <article className="cartao post">
        <h2 className="cartao__titulo">{post.title}</h2>
        <p className="cartao__texto">{post.body}</p>
      </article>
    </main>
  );
};

export default Post;
2 respostas
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala Andressa, tudo bem? Espero que sim!

Pode mandar aqui pra gente o projeto completo no github por favor?

Aguardo o retorno :D

por Luiz Fernando Ribeiro
| 119.4k xp | 128 posts
Instrutor Desenvolvedor Front-End

Olá Andressa, tudo bem?

Percebi que você está utilizando o useNavigate! então vou fazer 2 respostas, uma considerando que vc está utilizando a versão 6 do react-router-dom (que tem o useNavigate) e outro com as versões anteriores a versão 6 (que utilizam useHistory), beleza?

  • Usando a versão 6

primeiro erro no Post.jsx é que você está importando o useNavigate do react, não do react-router-dom, então o import deve ficar assim:

import React, { useEffect, useState, } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { busca } from "../api/api";
import "../assets/css/post.css";

segundo erro é que no useNavigate a gente não utiliza mais o .push, apenas a função, ou seja:

de navigate.push('/404') será navigate('/404').

  • Usando a versão 5-

Usando a versão 5 você deverá mudar o useNavigate para useHistory, o import ficará assim:

import React, { useEffect, useState, } from "react";
import { useHistory, useParams } from "react-router-dom";
import { busca } from "../api/api";
import "../assets/css/post.css";

e a utilização será navigate.push('/404') OBS: eu mantive a variável com o mesmo nome, mas pode nomeá-la como quiser. OBS2: caso você não saiba qual a versão do seu react-router-dom, na parte mais alta do seu projeto (onde está a sua pasta src), terá um arquivo chamado package.json. Se você entrar nele, você conseguirá ver o nome do react-router-dom acompanhado de alguns números, tipo assim:

"react-router-dom": "^6.2.1",

sempre o primeiro número significa a versão do seu pacote, no meu caso eu estou utilizando a versão 6 do pacote.

Caso não tenha respondido a sua dúvida, sinta-se a vontade para continuar este tópico, beleza?

Bons estudos!