Pasar un parámetro/atributo de una pantalla de React a otra

Tiempo de lectura: 2 minutos

Hola, hoy vamos a aprender cómo podemos pasar un parámetro de una pantalla de React a otra.

Paso 1: Instalación de React Router v6

Si aún no lo has hecho, instala React Router v6:

npm install react-router-dom@next

Paso 2: Configuración de React Router

En tu archivo App.js, configura las rutas utilizando BrowserRouter y Route:

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Pantalla1 from './Pantalla1';
import Pantalla2 from './Pantalla2';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Pantalla1 />} />
        <Route path="/dashboard/:userId" element={<Pantalla2 />} />
      </Routes>
    </Router>
  );
}

export default App;

Paso 3: Navegación con el ID

En tu componente de la Pantalla 1 (Pantalla1.js), utiliza useNavigate para manejar la navegación:

// Pantalla1.js
import React from 'react';
import { useNavigate } from 'react-router-dom';

const Pantalla1 = () => {
  const navigate = useNavigate();

  const handleClick = (id) => {
    navigate(`/dashboard/${id}`);
  };

  return (
    <div>
      {/* Contenido de la pantalla 1 */}
      <button onClick={() => handleClick(123)}>Ir a Dashboard con ID 123</button>
    </div>
  );
};

export default Pantalla1;

Paso 4: Recuperar el ID en la Pantalla 2

En tu componente de la Pantalla 2 (Pantalla2.js), utiliza useParams para recuperar el ID:

// Pantalla2.js
import React from 'react';
import { useParams } from 'react-router-dom';

const Pantalla2 = () => {
  const { userId} = useParams();

  return (
    <div>
      {/* Contenido de la pantalla 2 */}
      <p>ID del usuario: {userId}</p>
    </div>
  );
};

export default Pantalla2;

Paso 5: Ejecución del Proyecto

Asegúrate de que tu aplicación esté en ejecución:

npm start

Abre tu navegador y visita http://localhost:3000. Al hacer clic en el botón en la Pantalla 1, deberías ser redirigido correctamente a la Pantalla 2 con el ID del paciente mostrado.