Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] No se hace la redirección hacia Page404

Hola, el instructor en la clase hace el siguiente código:

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import "../assets/css/componentes/card.css";
import { buscar } from "../api/api";

const Post = ({ url }) => {
  const [post, setPost] = useState({}); 

  const { id } = useParams(); 

  const navigate = useNavigate();

  useEffect(() => {
    buscar(`/posts/${id}`, setPost).catch(() => {
      navigate("/not-found");
    });
  }, [id]);

  return (
    <main className="container flex flex--center">
      <article className="card post">
        <h2 className="post-card__title">{post.title}</h2>
        <p className="text__card">{post.body}</p>
      </article>
    </main>
  );
};

export default Post;

En teoría si yo en la URL agrego un id que no existe en mi servidor como http://localhost:3000/posts/90, debería aparecer el componente page404 indicando que el post no existe, tal como lo muestra el instructor, pero en vez de redireccionarme, renderiza el post en blanco, justamente como el problema que se mostraba al final de la clase anterior "Mostrando Post", y el que se aborda en esta clase.

Aquí dejo mi App.js por si es útil:

import "./assets/css/base/base.css";
import "./assets/css/componentes/card.css";
import Home from "./pages/Home";
import Sobre from "./pages/Sobre";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Page404 from "./pages/page404"; 
import Header from "./components/Header"; 
import Post from "./pages/Post";

function App() {

  return (
    
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/sobre" element={<Sobre />} />
          <Route path="/posts/:id" element={<Post />} />
          <Route path="*" element={<Page404 />} /> 
        </Routes>
      </Router>
    </>
  );
}

export default App;

Los post existentes si los renderiza y puedo acceder a ellos de manera individual pero no me redirecciona hacia la página del error cuando ingreso un id inexistente tal como lo muestra el instructor.

1 respuesta

¡Hola Kevin!

Entiendo tu problema. Parece que el redireccionamiento a la página 404 no está funcionando como esperabas. Revisando tu código, parece que todo está configurado correctamente. Sin embargo, me gustaría sugerirte que verifiques si estás importando correctamente el componente Page404 en tu archivo App.js. Asegúrate de que la importación esté escrita de la siguiente manera:

import Page404 from "./pages/Page404";

A veces, errores simples de importación pueden causar que el componente no se renderice como se espera. Si la importación está correcta, te recomendaría revisar la consola del navegador para ver si hay algún error que esté impidiendo el redireccionamiento.

Espero que esto te ayude a solucionar el problema. Si necesitas más ayuda, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios