Implementar rutas anidadas en React.js – React Router DOM V6

En este artículo, crearemos una aplicación React.js simple para implementar el enrutamiento anidado en la versión actual de react-router que es React Router DOM versión 6 . Usamos enrutamiento anidado en nuestra aplicación para que un componente principal tenga control sobre su componente secundario en el nivel de ruta.   

Requisitos previos: Los requisitos previos para este proyecto son:

• Reaccionar.js
• Reaccionar enrutador

Creando una aplicación React:

Paso 1: Cree una aplicación React escribiendo el siguiente comando en la terminal:

npx create-react-app nesting-demo

Paso 2: Ahora, vaya a la carpeta del proyecto, es decir, nesting-demo, ejecutando el siguiente comando:

cd nesting-demo

Estructura del proyecto: Se verá así:

Paso 3: Instalemos el paquete React Router DOM npm requerido para este proyecto:

npm install react-router-dom

Ejemplo: en este archivo, implementaremos la lógica de enrutamiento. Anteriormente, en React Router DOM V5, solíamos tener el elemento <switch> pero no lo usaremos ahora. Una de las características de React Router DOM V6 es que ahora viene con un elemento <Routes>. Esta es una actualización ya que viene con funciones como enrutamiento y enlace relativos, clasificación automática de rutas y rutas y diseños anidados. En nuestra app tendremos dos rutas, una para la página de Inicio y otra para la página de Cursos . En la página de Cursos, tendremos nuevamente dos rutas, una para el componente Buscar y la otra para el componente Lista . Por lo tanto, debemos implementar el enrutamiento anidado en la página de Cursos para representar el componente seleccionado.

import {BrowserRouter as Router, Link, 
  Routes, Route} from 'react-router-dom'
import './App.css';
import Home from './Pages/Home';
import Courses from './Pages/Courses';
import Search from './Components/Search';
import List from './Components/List';
  
function App() {
  return (
    <div className="App">
      <Router>
        <nav>
          <Link to="/">Home</Link>
          <Link to="courses">Courses</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/courses" element={<Courses />}>
            <Route path="search" element={<Search />} />
            <Route path="list" element={<List/>}/>
          </Route>
        </Routes>
     </Router>
    </div>
  );
}
  
export default App;

Colocamos las rutas denominadas ‘búsqueda’ y ‘lista’ en la ruta de ‘cursos’, por lo que la URL será localhost:3000/cursos/búsqueda y localhost:3000/cursos/ruta respectivamente.

Vamos a crear el componente de búsqueda y lista. Cree una carpeta llamada Componentes y debajo de ella cree dos archivos ‘Search.js’ y ‘List.js’ .

import React from 'react'
  
const Search = () => {
  return (
    <div className='Search'>
      <h2>You are inside the Search Component</h2>
      <h4>URL: localhost:3000/courses/search</h4>
    </div>
  )
}
  
export default Search

import React from 'react'
  
const List = () => {
  return (
    <div className='List'>
      <h2>You are inside the List Component</h2>
      <h4>URL: localhost:3000/courses/list</h4>
    </div>
  )
}
  
export default List

Ahora vamos a crear las dos páginas necesarias para esta aplicación. Cree una carpeta llamada Páginas y debajo de ella cree dos páginas llamadas ‘Home.js’ y ‘Courses.js’ .

import React from 'react'
  
const Home = () => {
  return (
    <div className="Page">
      <h1>You are in the Home page!</h1>
      <h3>URL: localhost:3000/</h3>
    </div>
  )
}
  
export default Home

Nombre de archivo Courses.js: en este archivo, usaremos el nuevo elemento <Outlet> para representar dos componentes secundarios llamados ‘Buscar’ y ‘Lista’.

import React from 'react'
import { Link, Outlet } from 'react-router-dom'
  
const Courses = () => {
  return (
    <div className="Page">
      <h1>You are in the Courses page!</h1>
      <h3>URL: localhost:3000/courses</h3>
      <div className="courses-nav">
        <Link to="/courses/search">Search</Link>
        <Link to="/courses/list">List</Link>
      </div>
      <Outlet />
    </div>
  )
}
  
export default Courses

Usamos un elemento <Outlet> como marcador de posición. Un <Outlet>, en este caso, es cómo el componente Courses representa sus rutas secundarias. Por lo tanto, <Outlet> representará un componente de búsqueda o un componente de lista según la ubicación actual.

/* Styling for the App component nav element 
and Course component course-nav div */
.App nav, .courses-nav{
  background: #f2f2f2;
  height: 4vh;
  min-width: 600px;
  border-radius: 10px;
  text-align: center;
  border-bottom: 2px solid #2f8d46;
}
  
/* Styling for App component nav element anchor 
tag and Course component nav element anchor tag */
.App nav a, .courses-nav a{
  padding: 20px 20px;
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #2f8d46;
}
  
/* Styling for Course component 
course-nav div anchor tag */
.courses-nav a{
  color: rgb(59, 117, 241);
}
  
/* Styling for the Home component main div */
.Page{
  width: 100%;
  height: 96vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background-color: lightgreen;
}
  
/* Styling for the Search & List component main div */
.Search, .List{
  width: 50%;
  height: 40%;
  padding: 100px;
  background-color: whitesmoke;
}

React Router DOM V6 viene con más funciones además del enrutamiento anidado simplificado, puede consultarlo aquí en su documentación oficial .

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: