Cómo utilizar React Router V6: una guía para principiantes

React Router es la biblioteca más popular que puede utilizar para implementar enrutamiento en aplicaciones React. Proporciona un enfoque basado en componentes para manejar una variedad de tareas de enrutamiento, incluida la navegación de páginas, parámetros de consulta y muchas más.

React Router V6 introduce algunos cambios significativos en el algoritmo de enrutamiento para abordar los problemas que estaban presentes en su versión anterior y proporcionar una solución de enrutamiento mejorada.

Comenzando con el enrutamiento usando React Router V6

Para empezar, crear una aplicación reaccionar. Alternativamente, configurar un proyecto de React usando Vite. Después de crear el proyecto, continúe e instale el reaccionar-enrutador-dom paquete.

npm install react-router-dom

Creando rutas usando React Router

Para crear rutas, comience envolviendo toda la aplicación con un NavegadorEnrutador componente. Actualiza el código en tu index.jsx o principal.jsx archivo de la siguiente manera:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(



 </Router>
 </React.StrictMode>,
)

Envolver el componente de la aplicación con el componente BrowserRouter garantiza que toda la aplicación tenga acceso al contexto de enrutamiento y a las funciones que ofrece la biblioteca React Router.

Usando el componente de rutas

Una vez que haya empaquetado la aplicación con el componente BrowserRouter, podrá definir sus rutas.

El Rutas componente es una mejora de la Cambiar componente que fue utilizado anteriormente por React Router v5. Este componente admite enrutamiento relativo, clasificación automática de rutas y la capacidad de trabajar con rutas anidadas.

Normalmente, agregará rutas en el nivel más alto de su aplicación, a menudo dentro del componente de la aplicación. Sin embargo, puede definirlos en cualquier otra ubicación, según la estructura de su proyecto.

Abre el aplicación.jsx archivo y reemplace el código repetitivo de React con lo siguiente:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

Esta configuración de enrutamiento asigna rutas URL específicas a los componentes de página correspondientes (Panel y Acerca de), asegurando que la aplicación muestre el componente apropiado cuando un usuario visita un sitio en particular. URL.

Observe la elemento prop, dentro del componente Ruta, que le permite pasar un componente funcional en lugar de solo el nombre del componente. Esto hace posible pasar accesorios por las rutas y sus componentes asociados.

En el src directorio, cree un nuevo paginas directorio y agregue dos archivos nuevos: Panel de control.jsx y Acerca de.jsx. Continúe y defina componentes funcionales dentro de estos archivos para probar las rutas.

Usando createBrowserRouter para definir rutas

Documentación de React Router recomienda utilizar el crear navegador enrutador componente para definir la configuración de enrutamiento para aplicaciones web React. Este componente es una alternativa ligera a NavegadorEnrutador que toma una serie de rutas como argumento.

Al utilizar este componente, no es necesario definir sus rutas dentro del componente de la aplicación. En su lugar, puede delinear todas las configuraciones de su ruta dentro del index.jsx o principal.jsx archivo.

A continuación se muestra un ejemplo de cómo puede utilizar este componente:

import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
const router = createBrowserRouter([
 {
 path: "/",
 element: <App />,
 },
 {
 path: "/dashboard",
 element: <Dashboard />,
 },
 {
 path: "/about",
 element: <About />,
 },
]);
ReactDOM.createRoot(document.getElementById("root")).render(


 </React.StrictMode>
);

La configuración de enrutamiento utiliza el crear navegador enrutador y Proveedor de enrutador componentes para crear un sistema de enrutamiento para una aplicación React.

Sin embargo, la única diferencia con esta implementación es que, en lugar de empaquetar la aplicación usando el componente BrowserRouter, usa el Proveedor de enrutador componente para pasar el Enrutador contexto a todos los componentes de la aplicación.

Implementación de rutas de página no encontrada

El camino prop en el componente Ruta compara la ruta proporcionada con la URL actual para determinar si hay una coincidencia antes de representar el componente requerido.

Para manejar casos donde ninguna ruta coincide, puede crear una ruta específica que administrará Errores 404 página no encontrada. Incluir esta ruta garantiza que los usuarios puedan recibir respuestas significativas en situaciones en las que hayan accedido a una URL inexistente.

Para implementar una ruta 404, agregue esta ruta dentro del componente Rutas:

// using the Route component
"*" element={} /> 
// using createBrowserRouter
{ path: "*", element: <NotFound />, },

Luego, crea una personalizada. No encontrado.jsx componente y finalmente, diseñar el componente usando módulos CSS.

El asterisco (*) es un carácter comodín que maneja escenarios donde ninguna de las rutas especificadas coincide con la URL actual.

Navegación programática usando el gancho useNavigate

El utilizarNavegar Hook proporciona una forma programática de manejar la navegación en aplicaciones. Este enlace es particularmente útil cuando desea activar la navegación en respuesta a interacciones o eventos del usuario, como clics en botones o envíos de formularios.

Echemos un vistazo a cómo utilizar el utilizarNavegar gancho para navegación programática. Suponiendo que haya creado el Acerca de.jsx componente funcional, importe el gancho del paquete React Router:

import { useNavigate } from'react-router-dom';

Luego agregue un botón que, al hacer clic, activa la navegación a una ruta específica.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

Vale la pena mencionar que el gancho useNavigate y el gancho useNavigation, introducidos en React Router v6, tienen propósitos distintos a pesar de sus nombres estrechamente relacionados.

El gancho useNavigation le permite acceder a detalles relacionados con la navegación, como el estado de navegación en curso y otros detalles. Esto es útil cuando desea representar elementos de la interfaz de usuario, como la carga de controles giratorios, para proporcionar información visual sobre los procesos en curso.

A continuación se muestra un ejemplo de cómo puede utilizar el gancho useNavigation.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

En este ejemplo, el Botón de enviar El componente actualizará dinámicamente su texto según el estado de navegación obtenido del gancho useNavigation.

Aunque estos ganchos tienen funciones diferentes, aún puedes usarlos juntos. El gancho useNavigate para iniciar el proceso de navegación y el gancho useNavigation para recuperar detalles de navegación en tiempo real, que luego guían el tipo de interfaz de usuario de comentarios que se mostrará en el navegador.

Usando el gancho useRoutes

Este gancho le permite definir las rutas junto con sus componentes correspondientes dentro de un objeto. Posteriormente, el gancho se utiliza para hacer coincidir las rutas y mostrar los componentes relevantes.

A continuación se muestra un ejemplo sencillo de cómo utilizar el gancho:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

En este ejemplo, el rutas El objeto define la asignación de rutas URL a componentes. El Aplicación Luego, el componente usa este enlace para hacer coincidir la URL actual y representar el componente apropiado según la ruta coincidente.

El uso de este enlace le brinda un control granular sobre su lógica de enrutamiento y le permite crear fácilmente una lógica de manejo de rutas personalizada para su aplicación.

Manejo de enrutamiento en aplicaciones React

Aunque React en sí no incluye un mecanismo prediseñado para manejar tareas de enrutamiento, React Router llena este vacío. Proporciona varios componentes de enrutamiento y funciones de utilidad que puede utilizar fácilmente para crear aplicaciones interactivas y fáciles de usar.