Como redirecionar usuário com React Router

Neste artigo você vai aprender a como redirecionar usuário com React Router, ou seja, mudar a página através do React Router

Fala programador(a), beleza? Bora aprender mais sobre React!

No ecossistema de desenvolvimento web, React Router tem um lugar especial por sua capacidade de fornecer uma experiência de roteamento dinâmico no lado do cliente semelhante à do servidor.

Este artigo focará em uma parte vital desse ecossistema – como redirecionar o usuário com React Router.

Introdução ao React Router

React Router é uma biblioteca poderosa e popular para roteamento em aplicações React.

A roteirização permite navegar entre diferentes páginas em sua aplicação sem a necessidade de atualizar a página inteira.

Isso torna as aplicações React extremamente rápidas e eficientes.

Uma das principais tarefas em qualquer aplicação da web é o redirecionamento entre páginas, e é aí que o React Router se destaca.

Redirecionando com o componente <Redirect/>

A maneira mais direta de redirecionar o usuário com React Router é usando o componente <Redirect/> fornecido pela biblioteca.

import { Route, Redirect } from 'react-router'

<Route exact path="/old-route" render={() => (
  <Redirect to="/new-route"/>
)}/>

No código acima, sempre que um usuário tentar acessar “/old-route”, ele será redirecionado para “/new-route”.

Redirecionando com o método history.push

Outra maneira de redirecionar o usuário é usando o método history.push. Esse método permite que você adicione uma nova entrada ao histórico de navegação.

this.props.history.push('/new-route');

Este método é comumente usado em funções de manipulação de eventos, como uma resposta a um clique do usuário.

Redirecionando após uma ação assíncrona

Frequentemente, é necessário redirecionar um usuário após a conclusão de uma ação assíncrona, como uma solicitação de API.

Isso pode ser feito facilmente combinando o React Router com outras bibliotecas como Redux ou React Context.

handleSubmit() {
  apiCall().then(() => {
    this.props.history.push('/new-route');
  });
}

Redirecionamento condicional

Em algumas situações, é desejável realizar o redirecionamento com base em determinadas condições. Um exemplo comum é redirecionar um usuário se ele não estiver autenticado.

Para fazer isso, você pode usar um componente de ordem superior (Higher-Order Component – HOC) para envolver os componentes que requerem autenticação.

function requireAuth(Component) {
  return class AuthenticatedComponent extends React.Component {
    isAuthenticated() {
      return this.props.isAuthenticated;
    }

    render() {
      return this.isAuthenticated()
        ? <Component {...this.props} />
        : <Redirect to="/login" />
    }
  }
}

class ProtectedRoute extends React.Component {
  // lógica do componente...
}

export default requireAuth(ProtectedRoute);

No exemplo acima, o componente ProtectedRoute é envolvido pelo HOC requireAuth.

Se o usuário estiver autenticado, ele verá o componente ProtectedRoute, caso contrário, será redirecionado para a página de login.

Redirecionando com hooks

O React Router v5 introduziu hooks que simplificam muitas tarefas, incluindo o redirecionamento. O hook useHistory pode ser usado para acessar o histórico de navegação e redirecionar o usuário.

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

No exemplo acima, o botão “Go home” redireciona o usuário para a página inicial “/home” quando clicado.

Quer aprender mais sobre React JS? Confira o vídeo abaixo:

Conclusão

O redirecionamento é uma parte essencial da criação de uma aplicação web dinâmica e reativa.

O React Router fornece uma variedade de maneiras de realizar redirecionamentos, cada uma com seus próprios casos de uso.

Quer você esteja lidando com redirecionamentos simples ou redirecionamento condicional baseado na autenticação do usuário, o React Router tem as ferramentas que você precisa.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.