Estructura de carpetas con React Router Dom 6

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0018:40

Estructura de carpetas con React Router Dom 6

Curso de React.js: Navegación con React Router

Clase 19 de 30

Clase 19 / 30

Recursos

Migrar a React Router Dom 6 en un proyecto como Todo Machine no se trata solo de instalar la librería: implica repensar cómo organizas tus carpetas para que cada vista, componente y hook viva en el lugar correcto. Aquí aprendes a reorganizar tu estructura de archivos para soportar rutas dinámicas, separar componentes de UI generales de los específicos y dejar tu proyecto listo para escalar.

¿Por qué cambiar la estructura de carpetas al añadir rutas?

Cuando tu aplicación pasa de tener una sola vista a varias, mantener todos los componentes sueltos en src deja de tener sentido. Necesitas una jerarquía que refleje qué pertenece a cada vista y qué se comparte entre todas.

La idea es simple: si un componente solo se usa en una ruta, vive con esa ruta. Si lo usas en varias, vive en una carpeta general. Esto vale también para React Hooks y helpers.

¿Qué es React Router Dom? Es la librería que te permite crear rutas y vistas en una aplicación de React, manejando la navegación sin recargar la página.

¿Qué carpetas crear para organizar tus vistas?

La propuesta de Juan DC para Todo Machine, vista alrededor de [2:00], se basa en dos carpetas principales dentro de src:

UI: aquí van los componentes que se reutilizan en varias rutas, como Modal, EmptyTodos, CreateTodoButton o ChangeAlert.
Routes: aquí vive cada vista de tu aplicación, con su propio archivo y, si aplica, sus componentes exclusivos.

Dentro de Routes creas una subcarpeta por vista: Home, New, Edit. Cada una contiene su propio archivo, por ejemplo HomePage.js, NewTodoPage.js y EditTodoPage.js.

¿Cómo migrar el componente App a la nueva estructura?

El antiguo App.js se transforma en dos cosas distintas. Por un lado, su contenido original (la vista principal con los todos) pasa a ser HomePage.js dentro de Routes/Home. Por otro lado, creas un nuevo App.js directamente en Routes, que ahora se encarga únicamente de declarar las rutas.

Un detalle útil que aparece alrededor de [4:30]: cuando arrastras archivos en Visual Studio Code, el editor te ofrece actualizar automáticamente los imports. Acepta con cuidado, porque a veces anida carpetas donde no deberían ir.

¿Cómo declarar rutas con HashRouter en React Router Dom 6?

Una vez tienes los tres componentes de vista listos, el nuevo App.js queda como el orquestador de rutas. La estructura mínima usa tres piezas: HashRouter, Routes y Route.

jsx import { HashRouter, Routes, Route } from 'react-router-dom'; import { HomePage } from './Home/HomePage'; import { NewTodoPage } from './New/NewTodoPage'; import { EditTodoPage } from './Edit/EditTodoPage';

function App() { return ( <HashRouter> <Routes> <Route path="/" element={<HomePage />} /> <Route path="/new" element={<NewTodoPage />} /> <Route path="/edit/:id" element={<EditTodoPage />} /> <Route path="*" element={<p>Not Found</p>} /> </Routes> </HashRouter> ); }

export { App };

¿Por qué usar rutas dinámicas con un ID en lugar del texto?

La ruta de edición se declara como /edit/:id y no como /edit/texto-del-todo. ¿La razón? Si tu todo dice algo como cortarle las uñas a las michis porque están muy largas, la URL se vuelve gigante y el encode transforma los espacios en caracteres difíciles de manejar.

La solución es identificar cada todo con un ID generado dinámicamente y leerlo después con el hook useParams de React Router Dom. Esto cambia la lógica de identificación que venía desde cursos anteriores, donde los todos se reconocían por su texto.

¿Qué hace useParams en React Router? Es un hook que extrae los valores dinámicos de la URL, como el :id de /edit/:id, para usarlos dentro de tu componente.

¿Qué hacer con las rutas no encontradas?

Si un usuario entra a una URL que no definiste, React Router lanza un warning en consola diciendo que no sabe qué renderizar. La solución es agregar una ruta comodín con path="*" que muestre un componente de Not Found, aunque sea un párrafo simple mientras decides darle más estilo.

¿Cómo arreglar los imports después de mover archivos?

Al mover HomePage.js dos niveles más adentro, todos los imports que apuntaban a la antigua estructura dejan de funcionar. Tienes dos rutas relativas que ajustar:

Hooks compartidos como useTodos: viven una carpeta atrás, porque los usarás también en las vistas de crear y editar.
Componentes de UI: ahora están en ../../ui/, dos niveles arriba y luego dentro de la carpeta general.

Este momento, alrededor de [11:00], es ideal para considerar alias de imports. En lugar de escribir ../../ui/Modal, podrías configurar @ui/Modal y olvidarte de contar carpetas. Es un patrón muy común en proyectos que crecen.

¿Qué pasa con la versión de React que usas?

Todo Machine corre sobre React 17, según lo declarado en el package.json. Esto importa porque la sintaxis de ReactDOM.render en el index.js principal es diferente a la de React 18, que usa createRoot. Mientras no actualices la versión, mantén el render clásico.

El index.js principal ahora importa el App desde ./Routes/App en lugar de la antigua carpeta App. Un cambio pequeño pero necesario para que todo siga funcionando.

¿Qué sigue después de configurar las rutas?

Con la estructura lista y las tres rutas respondiendo, el siguiente paso es migrar la lógica de los modales hacia vistas reales. El botón CreateTodoButton dejará de abrir un modal y pasará a navegar hacia /new, donde vivirá el formulario de creación.

Lo mismo aplica para editar: necesitarás un botón en cada todo que enlace a /edit/:id, recupere el texto original y lo cargue dentro de un text area para modificarlo.

Cuéntame en los comentarios qué estructura de carpetas usabas antes y cuál vas a adoptar ahora en tu proyecto.

Harold Zurita Simon

Hace 2 años

Creando las rutas de TODO Machine

. Vamos a reestructurar el proyecto de TodoMachine para remplazar portales y modales, por rutas utilizando React Router DOM. . La estructura de carpetas será la siguiente. .

public
src
- routes
- ui
- index.css
- index.js
.gitignore
README.md
package-lock.json
package.json
yarn.lock

. Dentro de src se va a dar el mayor cambio, puesto que ahora manejamos un archivo de routes que contiene nuestras rutas, nuestros custom hooks y la aplicación principal en App.js. .

routes
- edit
-- EditTodoPage.js
- home
-- HomePage.js
- new
-- NewTodoPage.js
- App.css
- App.js
- useLocalStorage.js
- useTodos.js

. Cada ruta tiene su propia página o componente que se va a renderizar para esa ruta. .

import React from 'react';

function EditTodoPage() {
  return (
    <p>Editar TODO</p>
  );
}

export { EditTodoPage };

import React from 'react';
import { useTodos } from '../useTodos';
import { TodoHeader } from '../../ui/TodoHeader';
import { TodoCounter } from '../../ui/TodoCounter';
import { TodoSearch } from '../../ui/TodoSearch';
import { TodoList } from '../../ui/TodoList';
import { TodoItem } from '../../ui/TodoItem';
import { TodosError } from '../../ui/TodosError';
import { TodosLoading } from '../../ui/TodosLoading';
import { EmptyTodos } from '../../ui/EmptyTodos';
import { TodoForm } from '../../ui/TodoForm';
import { CreateTodoButton } from '../../ui/CreateTodoButton';
import { Modal } from '../../ui/Modal';
import { ChangeAlert } from '../../ui/ChangeAlert';

function HomePage() {
  const { state, stateUpdaters } = useTodos();

  const {
    error,
    loading,
    searchedTodos,
    totalTodos,
    completedTodos,
    openModal,
    searchValue,
  } = state;

  const {
    setOpenModal,
    addTodo,
    completeTodo,
    deleteTodo,
    setSearchValue,
    sincronizeTodos,
  } = stateUpdaters;
  
  return (
    <React.Fragment>
      <TodoHeader loading={loading}>
        <TodoCounter
          totalTodos={totalTodos}
          completedTodos={completedTodos}
        />
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
        />
      </TodoHeader>

      <TodoList
        error={error}
        loading={loading}
        totalTodos={totalTodos}
        searchedTodos={searchedTodos}
        searchText={searchValue}
        onError={() => <TodosError />}
        onLoading={() => <TodosLoading />}
        onEmptyTodos={() => <EmptyTodos />}
        onEmptySearchResults={
          (searchText) => <p>No hay resultados para {searchText}</p>
        }
      >
        {todo => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onComplete={() => completeTodo(todo.text)}
            onDelete={() => deleteTodo(todo.text)}
          />
        )}
      </TodoList>

      {!!openModal && (
        <Modal>
          <TodoForm
            addTodo={addTodo}
            setOpenModal={setOpenModal}
          />
        </Modal>
      )}

      <CreateTodoButton
        setOpenModal={setOpenModal}
      />

      <ChangeAlert
        sincronize={sincronizeTodos}
      />
    </React.Fragment>
  );
}

export { HomePage };

import React from 'react';

function NewTodoPage() {
  return (
    <p>New Todo</p>
  );
}

export { NewTodoPage };

. Es evidente que las importaciones van a cambiar, debido a que todos nuestros componentes de interfaz se movieron a una carpeta llamada ui, entre otros cambios. . La estructura de la carpeta ui contempla lo siguiente. .

ui
- ChangeAlert
- CreateTodoButton
- EmptyTodos
- Modal
- TodoCounter
- TodoForm
- TodoHeader
- TodoIcon
- TodoItem
- TodoList
- TodoSearch
- TodosError
- TodosLoading

. A todo esto, los 2 archivos más importantes para poder migrar la aplicación a rutas serán index.js dentro de src, y App.js que se encuentra dentro de routes. .

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './routes/App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

import React from 'react';
import { HashRouter, Route, Routes } from 'react-router-dom';
import { EditTodoPage } from './edit/EditTodoPage';
import { HomePage } from './home/HomePage';
import { NewTodoPage } from './new/NewTodoPage';

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/new" element={<NewTodoPage />} />
        <Route path="/edit/:id" element={<EditTodoPage />} />
        <Route path="*" element={<p>Not Found</p>} />
      </Routes>
    </HashRouter>
  );
}

export { App };

. En App.js creamos la estructura principal de rutas utilizando a HashRouter como provider con 4 rutas principales que ya hemos mencionado previamente, añadiendo una ruta adicional para rutas que sean Not Found. . Finalmente lo exportamos como un export nombrado, por lo que lo importamos de la manera correspondiente desde el index.js que se encuentra en src.

Comentarios (26)26 comentarios

Maury Sugheiry Alcala Romero

Hace 4 años

Leandro Martin Villafuerte

Raycris Maldonado

Jose Ever Muñoz Muñoz

Sebastian Carballo

Juan Castro

Profesor

Bramucci Candela

Javier Fernando Chi Ortiz

Hace 3 años

Geovanni Labastida Vázquez

Jose Miguel Valero Reyes

Diego Reyes Cabrera

Max Andy Diaz Neyra

Seba Cardoso

Samuel Miranda Martínez

Santiago Lopera Naranjo

Josue Tapia Linarez

Diego Toledo

Alexis Castro Arias

Sebastián Andrés Sanhueza Tapia

Hace un año

Lucas Mateo Pintos Fitipaldi

Ivan Sosa Tovar

Jose Tellez

Omar Díaz Hernández

Nery Alberto Cano Ortigoza

Jhon Jairo Dueñas Vega

Henry Alexander Velásquez Rosas

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Estructura de carpetas con React Router Dom 6