Redirecionamento de páginas §

---

O React Router DOM fornece o hook useNavigate para permitir o redirecionamento programático em uma aplicação React. Este hook pode ser usado para navegar para uma rota específica em resposta a uma ação do usuário ou a um evento.

Para utilizar o hook useNavigate do React Router DOM para redirecionar para uma rota específica em um aplicativo React, você pode seguir o seguinte exemplo:

import { useEffect, useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
 
function Redirect() {
  const [time, setTime] = useState(3);
  const timeout = useRef(0);
  const navigate = useNavigate();
 
  useEffect(() => {
    clearTimeout(timeout.current);
 
    timeout.current = setTimeout(() => {
      setTime((t) => t - 1);
    }, 1000);
 
    if (time <= 0) {
      navigate('/');
    }
 
    return () => {
      clearTimeout(timeout.current);
    };
  }, [time]);
 
  return <h1>Redirecionando em {time}...</h1>;
}

Neste exemplo, o hook useNavigate é utilizado para obter a função navigate, que pode ser usada para navegar programaticamente para outra rota. Quando o usuário acessa a rota /redirect um contador de 3 segundos é acionado para redirecioná-lo para a página Home.

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado