Después de utilizar la función navigate se recarga el sitio

¡Hola Carolina!

Es posible que la recarga de la página esté relacionada con la forma en que se está manejando la redirección. Asegúrate de que estás utilizando el componente <Link> o la función useNavigate de React Router de la manera correcta. Es importante que al utilizar el navigate, se evite que la página se recargue.

Podrías intentar algo como esto:

import { useNavigate } from 'react-router-dom';

function MiComponente() {
  const navigate = useNavigate();

  function handleNotFound() {
    navigate('/not-found', { replace: true });
  }

  // Resto del código
}

Al utilizar { replace: true } estás indicando que la ruta actual se reemplace por la nueva ruta, sin crear una nueva entrada en el historial de navegación. Esto podría ayudar a evitar la recarga no deseada de la página.

Espero haber ayudado!

¡Hola Carolina!

En este caso, es posible que la recarga de la página esté relacionada con la forma en que se está manejando la redirección. Asegúrate de que estás utilizando el componente <Link> o la función useNavigate de React Router de la manera correcta. Es importante que al utilizar el navigate, se evite que la página se recargue.

Podrías intentar algo como esto:

import { useNavigate } from 'react-router-dom';

function MiComponente() {
  const navigate = useNavigate();

  function handleNotFound() {
    navigate('/not-found', { replace: true });
  }

  // Resto del código
}

Al utilizar { replace: true } estás indicando que la ruta actual se reemplace por la nueva ruta, sin crear una nueva entrada en el historial de navegación. Esto podría ayudar a evitar la recarga no deseada de la página.

Les comparto mi código, ya que considero que si estoy utilizando correctamente la función navigate pero aun así el sitio se recarga

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

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

    const navigate = useNavigate();
    
    useEffect(() => {
        search(`/posts/${id}`, setPost).catch( () => {
            navigate("/not-found", { replace: true });
        });
    }, [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;

Y aqui donde utilizo el Link:To

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

const ListPosts = ({url}) => {

    const [posts, setPosts] = useState([]);
    
    useEffect(() => {
        search(url, setPosts);
    }, [url]);

    return (
        <section className="posts container">
        {
            posts.map( post => {
                const {id, title, metadescription, categoria} = post;
                
                return <Link to={`/posts/${id}`} className={`post__card post-card--${categoria}`} key={id}>
                                    <article>
                                        <h3 className="post-card__title">
                                            {title}
                                        </h3>
                                        <p className="post-card__meta">{metadescription}</p>
                                    </article>
                                </Link>
            })
         }
        </section>
    )
};

export default ListPosts;

El detalle es que incluso al instructor Harland se le esta recargando la pagina cuando pone un post que no existe :( Por ejemplo, en el minuto 2:28 se puede ver como al utilizar el id 90 la pagina se redirige al notFound pero antes de hacerlo se recarga brevemente.