umm, mi lado radical eliminó todo lo que tenía delineado amarillo, pero mi lado prudente hizo commit antes de eso.
Fundamentos de navegación en la web
¿Cuándo necesitas React Router?
SSR vs. Single Page Applications
Versiones de React Router: ¿Por qué son tantas? ¿Cuál elegir?
Introducción a React Router DOM 6
Instalación de React Router DOM 6
BrowserRouter vs. HashRouter
Route: componentes de navegación
Link vs. NavLink
useParams: rutas dinámicas
useNavigate: historial de navegación
Outlet: nested routes
Fake authentication con React Router DOM 6
useAuth: login y logout
Menú con rutas públicas y privadas
Navigate y redirects: protegiendo rutas privadas
Roles y permisos
Reto: composición de componentes con navegación
Reto: UX de login y logout
Reto: roles complejos
React Router en TODO Machine
Integrando React Router a proyectos en React
Creando las rutas de TODO Machine
Botón de editar TODOs
Generador automático de IDs
Cambiando modales por navegación
Obtener y editar TODOs
useLocation: transferencia de datos por navegación
Deploy con React Router en GitHub Pages
Próximos pasos
Reto: página de búsquedas con navegación
Reto: TODO Machine con React Router DOM 5
Reto: PlatziMovies con React Router
Reto: crea tu propio React Router
Espera más cursos de React.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 5
Preguntas 2
umm, mi lado radical eliminó todo lo que tenía delineado amarillo, pero mi lado prudente hizo commit antes de eso.
👀 Yo cree un div que encierre o agrupe el formulario para poder centrarlo, ya que si lo hacemos de la forma normal con el margin auto, en responsive se rompe un poco la ui
const NewPage = () => {
return (
<div className='new-todo-container'>
<TodoForm
title="Write your new TODO"
submitText="Add"
submitEvent={() => console.log('llamar a add todo')}
/>
</div>
)
}
Y el css
.new-todo-container{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Espero les sirva.
Saludos.
Yo el botón de CreateTodo lo cambiaría por un componente Link.
Esto dice la documentación 👇:
Además, un componente Link es una etiqueta <a href=""> por detrás, lo cual es necesario para tener un buen SEO.
.
Es el equivalente a usar un <button> en vez de un <a> para cambiar de URLs en HTML puro.
Una alternativa a la funcionalidad creada en la clase para los textos dinamicos, es usar el hook de React Router DOM ‘useLocation’ que devuelve la ruta actualmente usada y con esto hacer la validación necesaria.
Creo que así, nos evitamos el tener que mandar props adicionales.
const location = useLocation();
<label>{(location.pathname === '/new') ? 'Escribe tu TODO' : 'Edita tu TODO'}</label>
sería bueno haber dejado el modal como para no perder la funcionalidad de los portales y hacer el edit en una nueva ventana
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.