El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos cómo realizar la navegación programática en una aplicación React utilizando React Router. La navegación programática es útil cuando necesitas redirigir a los usuarios en respuesta a eventos específicos, como después de enviar un formulario o al hacer clic en un botón.

Conceptos Clave

React Router: Biblioteca de enrutamiento para React que permite la navegación entre diferentes componentes.
useHistory Hook: Hook proporcionado por React Router para acceder al historial de navegación.
history.push(): Método para redirigir a una nueva ruta.
history.replace(): Método para reemplazar la ruta actual sin agregar una nueva entrada en el historial.

Configuración Inicial

Antes de comenzar, asegúrate de tener React Router instalado en tu proyecto. Si no lo tienes, puedes instalarlo usando npm o yarn:

npm install react-router-dom

yarn add react-router-dom

Ejemplo Práctico

Vamos a crear un ejemplo simple donde redirigimos al usuario a una página de "Perfil" después de hacer clic en un botón.

Paso 1: Configuración de Rutas

Primero, configuramos nuestras rutas en el componente principal de la aplicación.

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Profile from './Profile';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </Router>
  );
}

export default App;

Paso 2: Creación de Componentes

Creamos dos componentes simples: Home y Profile.

// Home.js
import React from 'react';
import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();

  const navigateToProfile = () => {
    history.push('/profile');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToProfile}>Go to Profile</button>
    </div>
  );
}

export default Home;

// Profile.js
import React from 'react';

function Profile() {
  return (
    <div>
      <h1>Profile Page</h1>
    </div>
  );
}

export default Profile;

Explicación del Código

useHistory Hook: En el componente Home, utilizamos el hook useHistory para obtener acceso al historial de navegación.
navigateToProfile Function: Definimos una función navigateToProfile que utiliza history.push('/profile') para redirigir al usuario a la página de perfil cuando se hace clic en el botón.

Ejercicio Práctico

Crea un componente Login que redirija a la página de "Dashboard" después de que el usuario haga clic en un botón "Login".

Solución

// Login.js
import React from 'react';
import { useHistory } from 'react-router-dom';

function Login() {
  const history = useHistory();

  const handleLogin = () => {
    // Aquí podrías agregar lógica de autenticación
    history.push('/dashboard');
  };

  return (
    <div>
      <h1>Login Page</h1>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

export default Login;

// Dashboard.js
import React from 'react';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard Page</h1>
    </div>
  );
}

export default Dashboard;

// App.js (actualizado)
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Profile from './Profile';
import Login from './Login';
import Dashboard from './Dashboard';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
        <Route path="/login" component={Login} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
}

export default App;

Resumen

En esta lección, aprendimos cómo realizar la navegación programática en React utilizando React Router. Vimos cómo usar el hook useHistory para acceder al historial de navegación y cómo redirigir a los usuarios utilizando los métodos history.push() y history.replace(). Además, implementamos un ejemplo práctico y un ejercicio para reforzar los conceptos aprendidos.

En el próximo módulo, exploraremos la gestión del estado en React, comenzando con una introducción a la API de Contexto.

Navegación Programática

Conceptos Clave

Configuración Inicial

Ejemplo Práctico

Paso 1: Configuración de Rutas

Paso 2: Creación de Componentes

Explicación del Código

Ejercicio Práctico

Solución

Resumen

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa