React Router

Agregando navegación a tu aplicación en React

React Router

La mayoría de los sitios que visitamos todos los días tienen navegación
entre páginas, URLs específicas que muestran determinados contenidos
y un historial de navegación en donde el browser nos permite retroceder
o avanzar.
React logra todo esto con ayuda de la librería React Router
React Router - Componentes
React router tiene 3 paquetes, nosotros usaremos solamente uno llamado
react-router-dom, con el cual podremos crear rutas, manipular el historial y
crear rutas anidadas.
Hay 3 componentes esenciales:
1. <BrowserRouter/> → Conecta nuestra aplicación a la URL del
navegador
2. <Routes/> → Genera un árbol de rutas y a partir de este nos permite
reemplazar la vista con el componente que coincide con la URL de nuestra
barra de navegación y nos va a renderizar solamente dicho componente.
3. <Route/> → Representa una ruta en el árbol, necesita al menos las
siguientes propiedades path y element, para representar una ruta.
React Router - Instalación
Luego de crear nuestra aplicación en react con el comando

npx create-react-app my-app

tenemos que instalar la dependencia react-router-dom para poder hacer uso de

sus componentes:

npm install react-router-dom@6

React Router - Configuración
En el archivo App.js, agregaremos la configuración y gestión de nuestras rutas.

Si queremos proveer a toda nuestra aplicación de rutas tenemos que posicionar al

componente BrowserRouter como el componente padre de todas nuestras rutas.
React Router - Configuración
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./components/Layout";
import Home from "./components/Home";
import Nosotros from "./components/Nosotros";
import Contacto from "./components/Contacto";
const App = () => {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}></Route>
<Route path="/home" element={<Home />}></Route>
<Route path="/quienes-somos" element={<Nosotros/>}></Route>
<Route path="/contacto" element={<Contacto />}></Route>
</Routes>
</BrowserRouter>
</>
);
};
export default App;
React Router - Configuración
En el código anterior, podemos ver que se configuran 4 rutas distintas, para las
cuales se mostrarán 4 componentes distintos dependiendo la URL en donde se
encuentre el usuario.

Dentro de nuestro Router podemos generar todas las rutas que queramos solo
necesitamos hacer uso del componente Route agregarle al menos dos
propiedades path y element, de esta manera si el path coincide con la URL del
navegador renderizará el valor de element.
React Router - Link
React Router nos proporciona el componente Link que recibe en su propiedad to el path de la
ruta a la cual nos queremos dirigir dentro de nuestra aplicación.
Es importante hacer uso del componente Link, ya que además de permitirnos crear los enlaces
de navegación este no recarga nuestra aplicación
import { Link } from "react-router-dom" ;

const Layout = () => {

return (
<>
<nav>
<Link to="/home">Home</Link>
<Link to="/quienes-somos" >Quienes Somos </Link>
<Link to="/contacto" >Contacto</Link>
</nav>
</>
);
};
export default Layout;
React Router - Rutas Anidadas
Hay elementos que necesitamos que se vean en todas las páginas, como puede
ser un header, una navbar, o un footer.
La ruta que renderiza el componente Layout debe envolver a todas las rutas
restantes de la siguiente manera:
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route path="/home" element={<Home />}></Route>
<Route path="/quienes-somos" element={<Nosotros/>}></Route>
<Route path="/contacto" element={<Contacto />}></Route>
</Route>
</Routes>
</BrowserRouter>
React Router - Outlet
El componente Layout no sabe en donde debe renderizar el componente del Route hijo que
corresponda con la URL actual, para esto React Router nos proporciona el componente Outlet
import { Link, Outlet } from "react-router-dom" ;

const Layout = () => {

return (
<>
<nav>
<Link to="/home">Home</Link>
<Link to="/quienes-somos" >Quienes Somos </Link>
<Link to="/contacto" >Contacto</Link>
</nav>
<Outlet />
</>
);
};
export default Layout;
React Router - Ruta Index
Mientras permanecemos en la ruta raíz “/” Outlet no renderiza nada, pero
podemos agregar una ruta hija que se renderice por defecto de la siguiente
manera:
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />}></Route>
<Route path="/quienes-somos" element={<Nosotros/>}></Route>
<Route path="/contacto" element={<Contacto />}></Route>
</Route>
</Routes>
</BrowserRouter>

De esta forma cuando estemos posicionados en la ruta “/” Outlet tomará el valor
del element de la ruta index para renderizarlo en el componente padre.
React Router - 404
Cuando se ingresa a una URL desconocida lo que sucede es que no se renderiza
nada, ya que no existe ninguna ruta correspondiente. Podemos configurar una
ruta global que se muestre en caso de no haber coincidencias de la siguiente
manera:
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />}></Route>
<Route path="/quienes-somos" element={<Nosotros/>}></Route>
<Route path="/contacto" element={<Contacto />}></Route>
<Route path="*" element={<h1>404</h1>}></Route>
</Route>
</Routes>
</BrowserRouter>
React Router - Parámetros
Tener un parámetro dinámico en nuestra URL significa que este puede coincidir
con cualquier valor en dicho segmento.

Por ejemplo la ruta /personas/:id coincidirá con una URL como

/personas/1 o /personas/123893
React Router - Parámetros
Podemos agregar una ruta con un parámetro a nuestras rutas:
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />}></Route>
<Route path="/quienes-somos" element={<Nosotros/>}></Route>
<Route path="/quienes-somos/:personaId" element={<Persona/>}></Route>
<Route path="/contacto" element={<Contacto />}></Route>
<Route path="*" element={<h1>404</h1>}></Route>
</Route>
</Routes>
</BrowserRouter>
React Router - Recibiendo parámetros de la URL
Vemos que tenemos una nueva ruta:
<Route path="/quienes-somos/:personaId" element={<Persona/>}></Route>

Que renderiza un componente Persona.

Ese componente, necesitará saber el valor del parámetro personaId para luego
buscar en un listado de personas, o llamar a una api con ese valor, o hacer
alguna otra cosa para la cuál necesite ese dato.

Para conocer el valor de personaId en la ruta actual haremos uso de

useParams. Este hook devuelve un objeto con las propiedades y el valor de los
segmentos dinámicos de la URL.
React Router - Recibiendo parámetros de la URL
import { useParams } from "react-router-dom";
const Persona = () => {
const { personaId } = useParams();
return (
<div>
ACA MOSTRAMOS LOS DATOS DE LA PERSONA CORRESPONDIENTE A ESA
PERSONAID: {`ID: ${personaId}`}
</div>
);
};
export default Persona;