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.
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.