React: Ejercicio navegación programática redireccionamiento

Descripción

Implementa un formulario de inicio de sesión en React con redireccionamiento programático usando React Router. Si las credenciales son correctas, navega al dashboard de administrador.

Crea un componente de React que implemente un formulario de inicio de sesión. Deberás aplicar la navegación programática utilizando el hook useNavigate de React Router. El formulario contará con los campos de username y password. La tarea consistirá en verificar las credenciales proporcionadas por el usuario comparándolas con valores estáticos predefinidos: un username que debe ser "admin" y una password que debe ser "1234".

Si las credenciales son correctas, tu aplicación debería redirigir automáticamente al usuario al tablero de administración ubicado en la ruta /admin-dashboard. En caso contrario, si las credenciales son incorrectas, será necesario mostrar un mensaje de error en la misma página para que el usuario pueda intentarlo nuevamente.

Una vez redirigido al tablero de administración, el componente debe exhibir un mensaje de bienvenida que incluya el nombre de usuario. El objetivo es comprender y aplicar los conceptos de navegación enrutada combinándolo con la gestión de estado y validación de formularios en React.

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado

Asistente IA

Ejercicios

Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Instrucciones

Implementa el formulario de inicio de sesión que verifique las credenciales.
Utiliza el hook useNavigate para la navegación programática.
Muestra un mensaje de error si las credenciales son incorrectas.
Al navegar al dashboard, muestra un mensaje de bienvenida que incluya el nombre de usuario.

Solución al ejercicio

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el examen para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con exámenes de React

Mejora tus habilidades con cientos de exámenes de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Retroalimentación

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a practicar

Únete a miles de desarrolladores mejorando sus habilidades

⭐⭐⭐⭐⭐

4.9/5 valoración