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.