Azamat Lee

Проблема с <Navigate> в вашем компоненте NotFoundзаключается в том, что вы пытаетесь использовать его как JSX-элемент внутри обработчика событий, что не приведет к рендерингу и перенаправлению. Вместо этого вам нужно использовать хук useNavigateдля программного перенаправления.

Вот как можно исправить ваш код:

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export default function NotFound(props) {
  const [redirectTimeOut, setRedirectTimeOut] = useState(5);
  const navigate = useNavigate(); // Используйте хук useNavigate

  useEffect(() => {
    const interval = setInterval(() => {
      if (redirectTimeOut >= 1) {
        setRedirectTimeOut((current) => (current >= 1 ? current - 1 : 0));
      } else {
        clearInterval(interval);
        navigate('/'); // Программное перенаправление
      }
    }, 1000);

    // Очистка интервала при размонтировании компонента
    return () => clearInterval(interval);
  }, [redirectTimeOut, navigate]); // Добавьте navigate в массив зависимостей

  const failedURL = "https://main/test";
  return (
    <div className="notFound-page">
      {/* Остальной код компонента */}
    </div>
  );
}

Теперь, когда счетчик обратного отсчета достигнет нуля, функция navigate('/') будет вызвана, и пользователь будет перенаправлен на главную страницу. Убедитесь, что вы добавили navigateв массив зависимостей useEffect, чтобы избежать нежелательных повторных вызовов перенаправления.