Usando Redirect en React Router

1. React Router Redirect en componentes funcionales
2. React Router Redirect en componentes de clase

Si es un desarrollador que trabaja en aplicaciones web complejas, probablemente comprenda la importancia del enrutamiento. Las rutas son una de las piezas clave que conforman el sistema de navegación de la aplicación. Los desarrolladores de ReactJs tienden a usar el paquete react-router-dom para crear rutas para aplicaciones.

Después de enviar un formulario (o cualquier otra acción del usuario), a veces la aplicación necesita navegar a una URL diferente. En este artículo, veremos cómo manejar las redirecciones en React.

React Router Redirect en componentes funcionales

Los ganchos pueden ampliar la funcionalidad básica de los componentes funcionales. Los desarrolladores de React pueden usar ganchos incorporados como useReducer(), useState(), useEffect() o crear sus propias versiones personalizadas.

useHistory() Hook

El useHistory() devuelve una instancia de history, que contiene la ubicación actual (URL) del componente. El manejo de redireccionamientos no es un propósito principal de este enlace. Sin embargo, las nuevas versiones de React Router (5 y superiores) le permiten usar este gancho para redirigir al usuario de una manera eficiente y legible.

Veamos el ejemplo:

import { useHistory } from "react-router-dom"
function SampleComponent() {
  let history = useHistory()
  function handleClick() {
    history.push("/somepage")
  }

  return (
    <span onClick={() => handleClick()}>
      Go home
    </span>
  )
}

En este ejemplo, importamos el gancho useHistory del paquete react-router-dom. Luego definimos un componente funcional simple que devuelve un único elemento <span> con un controlador de eventos para el evento click.

También creamos una variable history para almacenar la instancia devuelta por el gancho useHistory().

En el cuerpo de la función del controlador de eventos, usamos un método .push() y pasamos una cadena como argumento. El argumento de este método se agregará a la URL actual al final. Entonces, si nuestra aplicación se ejecutaba en el puerto localhost:3000 y tuviéramos que manejar un evento de click, nuestra URL cambiaría a localhost:3000/somepage.

React Router Redirect en componentes de clase

Otra forma de navegar a una URL diferente después de realizar una acción (enviar un formulario, hacer clic en un botón o cualquier otra acción del usuario) es utilizar el componente personalizado <Redirect>. Puede importarlo desde la biblioteca "react-router-dom".

Puede controlar cuándo se lleva a cabo la redirección renderizándola condicionalmente según el valor del estado. Veamos este ejemplo:

import React from "react"
import { Redirect } from "react-router-dom"

class MyComponent extends React.Component {
  constructor(props){
     super(props)
     this.state = {
    	    condition: false
  		}
  }
  handleClick () {
    axios.post(/*URL*/)
      .then(() => this.setState({ condition: true }));
  }

  render () {
    const { condition } = this.state;

     if (condition) {
       return <Redirect to='/somePage'/>;
     }
     return <button onClick={() => this.handleClick()}>Redirect</button>;
}

Nuestro estado tiene una propiedad condition, que se establece en false. Debido a este valor booleano, el componente <Redirect> no se procesa y la URL del usuario no cambia.

Al hacer clic en el botón único, los usuarios pueden activar un controlador de eventos que establece la propiedad condition en true. En este caso, se cumplirán los criterios para la instrucción if y la función de render devolverá el componente <Redirect>, que llevará a los usuarios a la ruta relativa especificada.

En este caso, si nuestra aplicación tiene una página de inicio en localhost:3000, y nuestro componente <Redirect> tiene un atributo to con el valor de '/somePage', los usuarios serán redirigidos a lo siguiente ubicación: localhost:3000/somePage.

this.props.history.push("")

Usar el gancho useHistory() no es la única forma de acceder a la ubicación actual del usuario. Los desarrolladores pueden lograr lo mismo en ambos tipos de componentes leyendo la propiedad history del objeto props.

Si desea que se produzca la redirección después de hacer clic en un botón, debe configurar un controlador de eventos onClick, que utilizará el método .push("") para proporcionar una ruta relativa a la ubicación donde el usuario debe ser redirigido. He aquí un ejemplo:

<button onClick={this.props.history.push('/somePage')}>Redirect to some page </button>

Si su ubicación actual está en la página de inicio localhost:3000, al hacer clic en este botón, los usuarios irán a la URL localhost:3000/somePage.