Почему в React-Router-DOM Navigate не редиректит на указанную ссылку?

Question

[DZHAMBUALT]

Здрасте. Возникла проблема во время обработки старницы 404. Navigate отказывается выполнять свою функцию.

Вот проблемное место. После окончания счётчика он должен редирекнуть на главную, но ничего не происходит:

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

export default function NotFound(props) {
  const [redirectTimeOut, setRedirectTimeOut] = useState(5);

  useEffect(() => {
    const interval = setInterval(() => {
      if (redirectTimeOut >= 1) {
        setRedirectTimeOut((current) => (current >= 1 ? current - 1 : 0));
      } else {
        clearInterval(interval);
        <Navigate to="/" />;
      }
    }, 1000);
  }, []);

  const failedURL = "https://main/test";
  return (
      <div className="notFound-page">
        <h1 className="comp-text-eb-3">
          <span>[404]</span> Произошла ошибка
        </h1>
        <h2 className="comp-text-eb-2">
          Страница с URL: <span>{failedURL}</span> не найдена
        </h2>
        <h3 className="comp-text-eb-2">
          Через <span>{redirectTimeOut}</span> секунд вы будет перенаправлены на
          <span>главную страницу</span>
        </h3>
      </div>
  );
}

Вот мои маршруты если в них проблема:

import { Route, Routes } from "react-router-dom";
export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<MainLayout />}>
          <Route index element={<Home />} />
          <Route path="categories/:type" element={<Products />} />
          <Route path="contacts" element={<Contacts />} />
          <Route path="promo" element={<Promo />} />
          <Route path="basket" element={<Basket />} />
          <Route path="order" element={<Order />}>
            <Route path="placing" element={<Placing />} />
            <Route path="complete" element={<Complete />} />
          </Route>
          <Route path="account" element={<Account />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

Answer 1

[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, чтобы избежать нежелательных повторных вызовов перенаправления.

Answer 2

[kokapuk]

A Navigate element changes the current location when it is rendered. It's a component wrapper around useNavigate, and accepts all the same arguments as props.

в useEffect оно не редерится, попробуй useNavigate