La navegación en una aplicación web de React se realiza utilizando una biblioteca llamada “React Router”. Aquí te dejo un ejemplo paso a paso de cómo hacerlo.
1. Primero, debes instalar React Router en tu proyecto. Lo puedes hacer utilizando npm con el siguiente comando en la terminal:
```bash
npm install react-router-dom
```
2. Luego, debes importar los componentes de React Router que necesitas en tu archivo JS. Los más comunes son `BrowserRouter`, `Route` y `Link`.
```jsx
import { BrowserRouter as Router, Route, Link } from “react-router-dom”;
```
3. Ahora, dentro de tu componente principal, debes envolver toda tu aplicación con el componente `Router`.
```jsx
function App() {
return (
}
```
4. Para configurar las rutas, debes usar el componente `Route`. Cada `Route` representa una página diferente en tu aplicación. Debes darle una prop `path` que especifica la URL de la página y una prop `component` que especifica el componente que debe renderizar cuando alguien navega a esa URL.
```jsx
function App() {
return (
}
```
5. Para crear enlaces a estas páginas, puedes usar el componente `Link`. `Link` se usa de manera similar a un elemento `` en HTML, pero en lugar de la prop `href`, se usa la prop `to`.
```jsx
function Navbar() {
return (
);
}
```
6. Si se necesita una ruta por defecto, por ejemplo cuando la ruta en la URL no coincide con ninguna ruta definida en nuestras rutas, se puede hacer uso del componente `Switch` y `
```jsx
import { Switch, Route } from ‘react-router-dom’
```
Es importante recordar que las rutas definidas en react-router son sensibles al orden de aparición, por lo que la ruta por defecto (Route sin path) debe estar al final.
Estos son los conceptos básicos de la navegación con React Router. A medida que tu aplicación se vuelve más complexa, es posible que necesites investigar y usar características de React Router más avanzadas como la navegación programática, las rutas anidadas, los parámetros de URL, etc. Pero en su núcleo, React Router es una herramienta bastante simple y fácil de usar.
