DZHAMBULAT-SAMOUCHKA
@DZHAMBULAT-SAMOUCHKA
Frontend разработчик

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

Здрасте. Возникла проблема во время обработки старницы 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>
  );
}
  • Вопрос задан
  • 117 просмотров
Решения вопроса 1
Azamat_Lee
@Azamat_Lee
Работаю с Wordpress
Проблема с <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, чтобы избежать нежелательных повторных вызовов перенаправления.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@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
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы