npm install react-router-dom
La etiqueta Link es la que nos permite navegar entre
las diferentes rutas de nuestra aplicación. Es importante destacar
que esta etiqueta debe ser importada desde react-router-dom.
La etiqueta NavLink es muy similar a la etiqueta
Link, pero con la diferencia de que nos permite
agregarle una clase CSS cuando la ruta que estamos visitando
coincide con la ruta que le pasamos como parámetro.
En caso de que el usuario ingrese una ruta que no existe en nuestra aplicación, podemos mostrarle una página de error. Para ello, debemos crear una ruta que en el path tenga como valor "*" y que se encuentre al final de todas las rutas.
Cuando una ruta cambia de dirección, podemos redireccionar
al usuario a la nueva ruta. Para ello, debemos importar el componente
Navigate desde react-router-dom y crear una ruta con
el atributo to que apunte a la ruta a la que
queremos redireccionar.
El enrutamiento con parámetros en React es una técnica que te permite crear rutas dinámicas en tu aplicación web para que puedas mostrar contenido personalizado según los valores pasados como parámetros en la URL. Esto es útil cuando tienes páginas o componentes que deben mostrar información específica según una variable, como un identificador único, un nombre o cualquier otro valor que pueda cambiar. Para implementar el enrutamiento con parámetros en React, generalmente se utiliza una biblioteca de enrutamiento como React Router.
Anidar rutas consiste en agrupar una serie de rutas react que empiezan con la misma URL para simplificar nuestro código y permiti un flujo de navegación más efectivo y centralizado.
Outlet nos permite establecer un espacio vacío dentro de un componente, donde podemos renderizar el resultado de una ruta. Este espacio permitirá entonces mostrar la agrupación de una serie de rutas react que empiezan con la misma URL. Aquí es donde comienza el manejo de termino de Rutas Padres y Rutas Hijas. En definitiva podemos realizar secciones dinámicas según el cambio de URL hija(Segmento de URL).
Mientras permanecemos en la ruta raíz “/”, de nuestro grupo de Rutas Anidadas Outlet no renderiza nada. Pero podemos agregar una ruta hija que se renderice por defecto utilizando el atributo Index de la siguiente manera.
