Este blog tiene como finalidad de compartir conocimientos y aportar un granito más de información. Comparto mis apuntes e información que he encontrado por Internet, teniendo en cuenta que muchas ideas escritas no son propias, en la parte inferior coloco la url de los sitios donde esta la idea original ... espero que les sea de utilidad.
Navegar entre paginas
Para implementar la navegación entre páginas en una aplicación web React, puedes utilizar react-router-dom, que es una biblioteca popular para el enrutamiento en aplicaciones React. Aquí tienes los pasos básicos para configurar la navegación entre páginas
Instalar react-router-dom: Primero, necesitas instalar react-router-dom en tu proyecto. Puedes hacerlo utilizando npm:
npm install react-router-dom
react-router-dom es una biblioteca de enrutamiento para aplicaciones web desarrolladas con React.js. Permite la navegación entre diferentes componentes de React en función de la URL del navegador, lo que proporciona una experiencia de usuario fluida similar a la de una aplicación de una sola página (SPA, por sus siglas en inglés).
Aquí hay una explicación básica de algunos conceptos clave relacionados con react-router-dom:
BrowserRouter: BrowserRouter es un componente que envuelve toda tu aplicación React. Utiliza la API HTML5 history para mantener sincronizada la interfaz de usuario con la URL del navegador.
Route: Route es un componente que define cómo se renderiza un componente de React cuando la URL coincide con una ruta específica. Cada Route toma dos propiedades principales: path, que especifica la URL que activará el componente, y component o render, que especifica qué componente React renderizar cuando la URL coincide con la ruta.
Switch: Switch es un componente que se utiliza para agrupar varias rutas. Cuando Switch se renderiza, examina sus hijos <Route> y renderiza el primero cuya ruta coincida con la URL actual. Esto significa que solo se renderizará una ruta a la vez.
Link: Link es un componente que se utiliza para crear enlaces entre diferentes partes de tu aplicación. Utiliza la navegación basada en la historia proporcionada por BrowserRouter para actualizar la URL del navegador sin recargar la página completa.
NavLink: NavLink es similar a Link, pero permite aplicar estilos especiales a los enlaces activos. Puedes agregar clases de estilo condicionalmente basadas en si la ruta actual coincide con la ruta del enlace.
Redirect: Redirect es un componente que se utiliza para redirigir a los usuarios a otra ubicación. Puedes usarlo para redirigir a los usuarios automáticamente a una página diferente cuando ciertas condiciones se cumplan.
createBrowserRouter es una función proporcionada por la biblioteca react-router-dom.
Se utiliza para crear un enrutador para tu aplicación. Este enrutador será responsable de manejar las rutas definidas en tu aplicación y renderizar los componentes correspondientes cuando la URL coincida con alguna de las rutas especificadas.
Puedes proporcionar una configuración de ruta específica al llamar a createBrowserRouter, y devolverá un enrutador configurado según esa configuración.
RouterProvider es un componente proporcionado por react-router-dom.
Se utiliza para envolver tu aplicación y proporcionar el enrutador creado por createBrowserRouter a todos los componentes de tu aplicación.
Este componente es esencial para que los componentes de tu aplicación puedan acceder al enrutador y utilizarlo para la navegación entre rutas.
Al envolver tu aplicación con RouterProvider, aseguras que todos los componentes puedan acceder al enrutador y que puedan utilizarlo para realizar acciones de navegación.
Nota
En React Router v6, el concepto de Switch ha sido eliminado y reemplazado por una nueva forma de manejar la coincidencia de rutas utilizando el componente Routes y el elemento Route. Aquí te muestro cómo manejar las rutas en React Router v6:
Crear un nuevo proyecto React
Abre tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto React:
npx create-react-app inicio_rutamiento
Este comando creará un nuevo directorio llamado inicio con la estructura básica de un proyecto React, posteriormente ingresar al directorio del proyecto
cd inicio_rutamiento
En seguida ya estando en el directorio del proyecto se instalar las dependencias de Leaflet y react-leaflet junto con las de react.
Esto instalará las dependencias necesarias para trabajar con Leaflet y react-leaflet en tu proyecto y para finalizar, ejecuta el siguiente comando para iniciar tu aplicación React:
npm start
Esto iniciará la aplicación y abrirá automáticamente tu navegador predeterminado en http://localhost:3000. Deberías ver un mapa interactivo.
Desarrollo
En nuestro modulo App colocamos el siguiente codigo.
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './home';
import About from './about';
import Contact from './contact';
import NotFound from './notFound';
const App = () => {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
};
export default App;
Creamos los modulos home,about,contact y not found
//home.js
import React from 'react';
import { Link } from 'react-router-dom';
const Home = () => {
return (
<>
<h2>Home</h2>
<ul>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</>
);
};
export default Home;
// about.js
import React from 'react';
import { Link } from 'react-router-dom';
const About = () => {
return (<>
<h2>About</h2>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</>);
};
export default About;
// contact.js
import React from 'react';
import { Link } from 'react-router-dom';
const Contact = () => {
return (
<>
<h2>Contact</h2>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</>);
};
export default Contact;
// notFound.js
import React from 'react';
const NotFound = () => {
return <h2>404 - Not Found</h2>;
};
export default NotFound;
Con estos pasos, has configurado una aplicación básica de React utilizando React Router v6 para manejar la navegación entre las diferentes páginas. Puedes agregar más rutas y páginas según sea necesario para tu aplicación