En una aplicación de React, el enrutamiento es la habilidad de mostrar diferentes componentes según la URL actual. Puedes usar una librería de enrutamiento como React Router para manejar el enrutamiento en tu aplicación de React.
Para usar React Router, primero debes instalarlo mediante npm o yarn:
npm install react-router-dom
Una vez que hayas instalado React Router, puedes importar los componentes BrowserRouter, Route y Link y usarlos en tu aplicación.
BrowserRouter es un componente que proporciona un contexto de enrutamiento para tu aplicación. Debe ser el componente padre de todos los componentes de enrutamiento.
import { BrowserRouter } from 'react-router-dom';
Route es un componente que se usa para definir una ruta. Cada Route tiene un atributo path que indica qué URL debe mostrar el componente correspondiente.
import { Route } from 'react-router-dom';
Link es un componente que se utiliza para crear enlaces entre diferentes rutas de tu aplicación. A diferencia de los enlaces tradicionales , los enlaces de React Router no recargan la página completa cuando se hacen clic.
import { Link } from 'react-router-dom';
Aquí hay un ejemplo de cómo utilizar estos componentes para configurar el enrutamiento en una aplicación de React:
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</BrowserRouter>
);
}
export default App;
En este ejemplo se tiene un componente principal App que envuelve toda la aplicación en un BrowserRouter componente. Dentro de éste se tiene un navegador con tres links, cada uno apuntando a una ruta diferente, el componente Route se usa para definir las rutas y se le especifica que componente se tiene que cargar.
https://www.w3schools.com/react/react_router.asp
https://pablomonteserin.com/curso/react/react-router/
https://guias.makeitreal.camp/react/react-router
