13-Implementar React Router y Navegación

 

Objetivo

Configurar React Router para crear una Single Page Application (SPA) con navegación entre componentes.

---

Paso 1: Preparar los componentes

Primero, vamos a agregar contenido básico a nuestros componentes para visualizar la navegación.

En Movie.js:

jsx

// Movie.js
import React from 'react';

const Movie = () => {
  return (
    <div>
      <h1>Movie</h1>
    </div>
  );
};

export default Movie;

En MovieList.js:

jsx

// MovieList.js
import React from 'react';

const MovieList = () => {
  return (
    <div>
      <h1>Movie List</h1>
    </div>
  );
};

export default MovieList;

En MovieDetail.js:

jsx

// MovieDetail.js
import React from 'react';

const MovieDetail = () => {
  return (
    <div>
      <h1>Movie Detail</h1>
    </div>
  );
};

export default MovieDetail;

Nota:

• Usamos componentes funcionales (recomendados en React moderno).

• Los nombres están en PascalCase (convención).

• Exportamos cada componente como export default.

---

Paso 2: Instalar React Router

En la terminal, ejecuta:

bash

npm install react-router-dom

Esto añade la librería de enrutamiento a nuestro proyecto.

---

Paso 3: Configurar Router en index.js

Importa BrowserRouter y envuelve la aplicación:

jsx

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'; // Importar BrowserRouter
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter> {/* Envolver la App con BrowserRouter */}
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

---

Paso 4: Configurar Navegación en App.js

4.1 Importar componentes y elementos de React Router

jsx

// App.js
import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Movie from './components/movies/Movie';
import MovieList from './components/movies/MovieList';
import MovieDetail from './components/movies/MovieDetail';

4.2 Crear barra de navegación

Vamos a crear una barra de navegación con enlaces usando <Link>:

jsx

// App.js
function App() {
  return (
    <div>
      {/* Barra de Navegación */}
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">
            Películas
          </Link>
          <div className="navbar-nav">
            <Link className="nav-link" to="/">
              Lista
            </Link>
            <Link className="nav-link" to="/add">
              Agregar
            </Link>
          </div>
        </div>
      </nav>

      {/* Contenedor para las rutas */}
      <div className="container mt-3">
        <Switch>
          {/* Ruta para lista de películas */}
          <Route exact path={["/", "/movies"]} component={MovieList} />
          {/* Ruta para detalles de película (con parámetro id) */}
          <Route path="/movies/:id" component={MovieDetail} />
          {/* Ruta para agregar/editar película */}
          <Route path="/add" component={Movie} />
        </Switch>
      </div>
    </div>
  );
}

export default App;

Explicación:

1. <Link>: Reemplaza <a> para navegar sin recargar la página.

   • to: Define la ruta de destino.

2. <Switch>: Renderiza solo la primera ruta que coincida.

3. <Route>: Define las rutas y los componentes a mostrar.

   • exact: Coincide exactamente con la ruta.

   • path: Ruta URL.

   • component: Componente a renderizar.

   • :id: Parámetro dinámico (para detalles de película).

---

Paso 5: Probar la Navegación

1. Inicia el servidor:

   bash

   npm start

2. Prueba las rutas:

   • / o /movies → Mostrará MovieList.

   • /movies/1 → Mostrará MovieDetail.

   • /add → Mostrará Movie.

   Puedes cambiar la URL manualmente o usar los enlaces de la barra de navegación.

---

Errores Comunes y Soluciones

Error: "BrowserRouter is not defined"

• Causa: Error de escritura en la importación.

• Solución: Verifica que sea BrowserRouter (con 'R' mayúscula).

Error: Etiquetas sin cerrar en JSX

• Ejemplo: <input> debe ser <input />.

• Solución: Cierra todas las etiquetas automáticamente o manualmente.

Error: El componente no se renderiza

• Causa: Rutas mal definidas o importaciones incorrectas.

• Solución:

  1. Revisa los nombres de los componentes importados.

  2. Verifica que las rutas en <Route> coincidan con los enlaces <Link>.

Error: No se actualiza la vista al navegar

• Causa: El servidor de desarrollo puede quedar en un estado inconsistente.

• Solución: Detén el servidor (Ctrl + C) y reinícialo con npm start.

---

Buenas Prácticas

1. PascalCase: Nombres de componentes y archivos en PascalCase.

2. Orden alfabético: En imports para mejor organización.

3. Componentes funcionales: Preferidos sobre clases (compatibilidad con Hooks).

4. export default: Úsalo al final del archivo del componente.

---

Resumen

Hemos implementado React Router para:

• Crear una SPA con navegación sin recargas.

• Configurar rutas básicas y dinámicas.

• Usar <Link> para navegación y <Route> para definir vistas.

• Manejar errores comunes durante la configuración.

En el siguiente paso, conectaremos la aplicación a una API para gestionar datos de películas.

¿Preguntas? ¡Déjalas en los comentarios