Tutorial de React Router v6 - Navegación y Configuración
En este tutorial, descubrirás cómo utilizar la última versión del React Router Dom para crear aplicaciones de página única (SPA) y navegar entre diferentes componentes. La configuración y administración de rutas será nuestro foco principal.
Conocerás los conceptos básicos sobre cómo funciona el enrutamiento en las SPA y cómo se relaciona con la navegación dentro del sitio web. Te enseñaremos paso a paso cómo instalar React Router Dom, configurarlo para que funcione correctamente, y cómo crear diferentes rutas para cada componente de nuestra aplicación.
Navegación y Configuración son los temas centrales de este tutorial sobre cómo usar react router dom en una aplicación de página única.
Instalación y Configuración
Para empezar a utilizar React Router v6, primero debemos instalarlo mediante npm o yarn utilizando el siguiente comando:
bash
npm install react-router-dom@6
Una vez instalado, importamos BrowserRouter en nuestro archivo indice.js para hacer que las rutas definidas sean accesibles desde cualquier lugar de la aplicación.
Rodeamos todo nuestro componente raíz con un BrowserRouter para que todas las rutas se puedan navegar sin problemas:
```jsx
import { BrowserRouter } from 'react-router-dom';
import App from './App';
const Root = () => {
return (
);
};
```
De esta manera, hemos configurado React Router v6 correctamente para utilizar en nuestra aplicación.
Definir las rutas
Para definir las rutas, debemos importar la función Route desde el paquete de React Router DOM, que es responsable de renderizar un componente específico cuando una ruta se coincide. La sintaxis básica de Route es la siguiente:
jsx
import { Route } from 'react-router-dom';
Una vez que tenemos la función, podemos utilizarla dentro del componente App para mapear cada ruta con el componente correspondiente.
Por ejemplo, si deseamos renderizar un componente "Inicio" cuando la URL coincida con "/", podemos escribir:
jsx
<Route path="/" element={<Inicio />} />
De manera similar, si deseamos mostrar un componente "SobreNosotros" cuando la URL coincida con "/sobre-nosotros", podemos escribir:
jsx
<Route path="/sobre-nosotros" element={<SobreNosotros />} />
De esta forma, estamos definirindo las rutas que se ejecutarán en nuestra aplicación, permitiendo al usuario navegar entre los diferentes componentes.
Utilizando Route y Switch para navegar entre páginas
Ahora que sabemos cómo funcionan las rutas, es hora de implementarlas en nuestro código.
La forma más sencilla de implementar una ruta es utilizando el componente
path: Es la ruta que deseamos configurar.component: El componente que se renderizará cuando la ruta coincida.
El componente <Switch></Switch> es obligatorio, ya que sirve como contenedor para los componentes <Route></Route>. También acepta una prop key si no estás utilizando el componente <Route exact></Route>.
jsx
import { BrowserRouter, Route, Switch } from 'react-router-dom';
Al utilizar
Es importante recordar que el componente <Switch> solo debe tener hijos de tipo <Route>. Si tienes más componentes entre estas etiquetas, puedes utilizar React Fragment o un componente vacío para evitar la advertencia.
Creando enrutadores de nivel superior (Route, Switch)
En React Router DOM, puedes utilizar el componente Route para definir rutas específicas en tu aplicación.
El uso más común del componente Route es mapear una ruta a un componente particular. Por ejemplo:
```jsx
import { Route } from 'react-router-dom';
function App() {
return (
<Route path="/inicio" component={Inicio} />
</div>
);
}
```
En este ejemplo, cualquier navegación a /inicio se renderizará en el componente Inicio.
Manejando la navegación entre componentes hijos
Una vez que hayamos configurado nuestras rutas, podemos empezar a navegar entre las diferentes vistas de nuestra aplicación usando el React Router DOM. Para hacer esto, necesitaremos usar el componente Link, que nos permitirá crear enlaces que redireccionen a diferentes rutas.
Un ejemplo básico de cómo utilizar Link podría ser en la barra de navegación de nuestra aplicación. Supongamos que tenemos un menú con tres opciones: Inicio, Sobre Nosotros y Contacto. Queremos que cuando se haga clic en cada opción, nos redireccione a la página correspondiente.
Para lograr esto, podemos crear un componente Menu que contenga los tres enlaces, utilizando el componente <Link> de React Router DOM para crear la conexión entre las páginas:
```javascript
import { Link } from 'react-router-dom';
function Menu() {
return (
);
}
export default Menu;
```
En este ejemplo, estamos utilizando el componente <Link> para crear enlaces que se conecten con las rutas /, /sobre-nosotros y /contacto. Cuando se haga clic en cada enlace, nos redireccionará a la página correspondiente.
Protegiendo las rutas con autorización y autenticación
Cuando se trata de aplicaciones complejas, a menudo es necesario proteger ciertas rutas para que solo usuarios autorizados tengan acceso a ellas.
Uso del componente *Guard*
Para lograr esto, React Router proporciona un componente llamado Guard que permite verificar si el usuario tiene la autorización necesaria antes de acceder a una ruta específica. Por ejemplo, si tenemos un sistema donde solo los administradores pueden acceder al panel de control, podemos crear un componente Guard para verificar si el usuario es admin o no.
```jsx
import React from 'react';
import { Route, Navigate, useLocation } from 'react-router-dom';
const AuthGuard = ({ children }) => {
const location = useLocation();
const usuario = obtenerInformacionUsuario();
if (!usuario || !esAdmin(usuario)) {
return
}
return children;
};
export default AuthGuard;
```
Uso de la función *useNavigate**
En lugar de utilizar el componente Guard, también podemos usar la función useNavigate para redirigir al usuario a una ruta diferente en caso de que no cumpla con las autorizaciones necesarias.
```jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';
const AuthGuard = ({ children }) => {
const navigate = useNavigate();
const usuario = obtenerInformacionUsuario();
if (!usuario || !esAdmin(usuario)) {
return navigate("/login");
}
return children;
};
export default AuthGuard;
```
Estos son solo algunos ejemplos de cómo proteger las rutas con autorización y autenticación en una aplicación que utiliza React Router.
Uso de Redirect para redireccionar a nuevas rutas
Una vez que tenemos definidas nuestras rutas, podemos decidir utilizar el componente <Redirect> para redireccionar al usuario a una nueva ruta cuando lo necesitamos. Este es un ejemplo básico de cómo podría funcionar:
```jsx
import { BrowserRouter, Link, Route, Redirect } from 'react-router-dom';
function App() {
return (
Inicio
- Sobre Nosotros
-
{localStorage.getItem('logueado') ? (
) : (
)}
);
}
```
En el ejemplo anterior, se muestra cómo redireccionar al usuario a una nueva ruta cuando está logueado o no. Esta es solo una de las formas en que se puede utilizar <Redirect>.
Conclusión
Al finalizar este tutorial, podrás aplicar React Router Dom para crear una experiencia de usuario fluida y consistente en tu aplicación de página única.
La configuración del BrowserRouter te permitirá hacer que tus componentes se conecten a las rutas correctamente. De esta manera podrás navegar fácilmente entre diferentes partes de la aplicación sin tener que recargar toda la página, gracias al poderoso sistema de enrutamiento de React Router.
Ahora que conoces la base para implementar el navegación en tu proyecto con ayuda del popular framework React Router Dom, puedes comenzar a desarrollar aplicaciones más complejas y robustas.
Si quieres conocer otros artículos parecidos a Tutorial de React Router v6 - Navegación y Configuración puedes visitar la categoría Programacion.
Deja una respuesta
Contenido que te pude interesar