Primeras rutas 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:0010:41

Primeras rutas con React Router Dom 6

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

Clase 6 de 30

Clase 6 / 30

Recursos

Configurar la navegación en una aplicación React deja de ser un misterio cuando entiendes cómo funcionan los componentes base de React Router Dom 6. Aquí aprenderás a definir rutas, manejar páginas no encontradas y estructurar tu app para que el menú y el footer convivan con el contenido dinámico, todo usando un proyecto creado con Create React App.

¿Qué componentes necesitas para empezar con React Router Dom 6?

Antes de escribir la primera ruta, importa los tres pilares que sostienen toda la navegación.

HashRouter: ideal cuando vas a hacer deploy en GitHub Pages, porque evita problemas con las URLs.
Routes: el contenedor en plural que envuelve a todas tus rutas y decide cuál renderizar.
Route: el componente en singular que define cada ruta individual con su path y su element.

En versiones anteriores, Routes se llamaba Switch y las propiedades como element se llamaban component o render. Si estás migrando desde una versión vieja, este es el cambio más visible.

¿Cuándo debo usar HashRouter en lugar de BrowserRouter? Úsalo cuando vayas a desplegar en servicios como GitHub Pages que no manejan bien el routing del lado del servidor. El HashRouter agrega un # antes de la ruta para que el navegador no haga peticiones reales al servidor.

¿Cómo se estructura el componente App con rutas dinámicas?

La idea es envolver toda tu aplicación en el HashRouter, que funciona como un provider (igual que React Context, solo que más bonito). Dentro de ese provider colocas lo que quieres que aparezca en todas las páginas, como el menú, y luego defines la zona dinámica con Routes.

jsx <HashRouter>

Fíjate en algo importante: el componente Route no se abre y se cierra como un contenedor tradicional. Funciona como un self-closing tag que recibe dos propiedades clave: path y element. En element pasas directamente el componente JSX que quieres renderizar.

¿Por qué el menú debe ir dentro del HashRouter?

Esta es una decisión de diseño que evita dolores de cabeza después. Si dejas el menú fuera del HashRouter, ese menú no podrá acceder a la información del provider. Eso significa que no podrás navegar programáticamente desde el menú, ni leer la ruta actual, ni hacer redirecciones cuando implementes autenticación.

Mantén el menú adentro del router pero afuera de Routes, así se renderiza en todas las páginas y a la vez tiene acceso al contexto de navegación.

¿Cómo manejar rutas no encontradas con el asterisco?

El truco del asterisco es una de las gemas más útiles de React Router. Cuando defines un Route con path="*", le estás diciendo: "si ninguna ruta anterior coincidió, renderiza esto".

¿Qué hace el asterisco en React Router? Captura cualquier URL que no haya hecho match con las rutas definidas arriba. Sirve para mostrar una página not found cuando el usuario escribe una ruta que no existe.

El orden importa. Si pones el asterisco al inicio, todas las rutas mostrarán not found porque el match se hace de arriba hacia abajo. Déjalo siempre al final.

¿Cómo crear los componentes de página paso a paso?

Cada página es un componente React común y corriente. Por convención, conviene exportarlos con named exports en lugar de default exports para evitar typos al importarlos en otros archivos.

jsx import React from 'react';

export function HomePage() { return <h1>HomePage</h1>; }

Replica esa estructura para BlogPage.js, ProfilePage.js y un Menu.js que contenga una <navbar> simple. Visual Studio Code te ayuda a importar automáticamente, pero el concepto es el mismo: cada archivo exporta su componente y App.js los consume.

¿Qué pasa con las URLs cuando usas HashRouter?

Aquí viene un detalle que confunde a muchos. Como estás usando hash navigation, las rutas no funcionan escribiendo /blog directamente en el navegador. Tienes que escribir /#/blog para que el router las interprete correctamente.

La ruta principal es /#/.
Para entrar a otros endpoints necesitas /#/blog, /#/profile, etc.
Si escribes algo no definido como /#/cualquiercosa, se renderiza el componente not found.
Si escribes rutas sin el hash como /blog/lalala, el router las interpreta como ruta principal y muestra el home.

Si cambiaras el HashRouter por un BrowserRouter, no tendrías que preocuparte por los hashes. Las rutas dentro de tu código siguen siendo /, /blog, /profile, sin importar el tipo de router. El provider se encarga de agregar los hashes cuando es necesario.

En la siguiente etapa toca aprender a navegar entre páginas sin cambiar la URL manualmente, usando los componentes Link y NavLink. Cuéntame en los comentarios qué tipo de router elegiste para tu proyecto y por qué.

Harold Zurita Simon

Hace 3 años

Route: componentes de navegación

. Vamos a empezar a crear nuestras primeras rutas con React Router DOM 6 y vamos a utilizar HashRouter. . En nuestro archivo App.js vamos a importar algunos componentes desde react-router-dom: .

HashRouter: Primero vamos a necesitar un router, pudo haber sido un BrowserRouter o un MemoryRouter, sin embargo utilizaremos un HashRouter debido a que planeamos desplegarlo en GitHub Pages. Este componente funge de provider. .
Routes: Contienen a las rutas dinámicas .
Route: Es la ruta en sí e indica qué componente renderizar.

import { HashRouter, Routes, Route } from 'react-router-dom';
import { Menu } from './Menu';
import { HomePage } from './HomePage';
import { BlogPage } from './BlogPage';
import { ProfilePage } from './ProfilePage';

function App() {
  return (
    <>
      <HashRouter>
        <Menu />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/blog" element={<BlogPage />} />
          <Route path="/profile" element={<ProfilePage />} />
          <Route path="*" element={<p>Not found</p>} />
        </Routes>
      </HashRouter>
    </>
  );
}

export default App;

. Lo primero que podemos observar es que nuestro componente HashRouter va a contener a los demás componentes, esto porque es un provider. Lo que pongamos adentro que esté por de fuera de Routes se va a renderizar en todas las páginas, como en este caso el componente Menu. . Como dijimos, vamos a también tener nuestras rutas dinámicas dentro de un componente Routes, que sin embargo dependiendo de la versión que estemos utilizando podría cambiar de nombre a Switch por ejemplo. . Dentro de Routes tendremos a las rutas Route en sí, cada una de ellas define una ruta que tiene como propiedades al path y al element. Normalmente este componente no se abre y se cierra, solo se cierra. . En nuestro componente Route la propiedad path define la ruta que va después de /#/. La propiedad element que dependiendo de la versión y el tipo de React Router que estemos utilizando, puede cambiar de nombre a render o component, sin embargo independientemente del nombre que tenga lo que hace es indicar qué componente se va a renderizar cuando accedamos a la ruta definida en la propiedad path. . Las rutas definidas en Routes son algo independientes del tipo de router; es decir, que no saben si estamos utilizando un hash router o un browser router. Por lo que si decidimos cambiar el tipo de router no tendremos que modificar las rutas porque por si solas se acoplaran después de un /#/ si estuviéramos utilizando un HashRouter o directamente después del / si estamos utilizando un BrowserRouter. Debido a ello en la propiedad path del componente Router ponemos las rutas de forma normal, luego nuestro provider se encargará de ponerle los hashes si este lo requiere. . Como podemos contemplar hemos creado varias rutas que renderizarán un componente en específico dependiendo de la ruta en la que estamos. Sin embargo, una de esas rutas es simplemente un * que significa cualquier ruta que no hayamos definido anteriormente, a lo cual vamos a responder renderizando un Not Found. Esta ruta genérica es recomendable posicionarla al final para evitar posibles conflictos; dependiendo de la versión que utilicemos, el colocarlo como primera ruta podría significar que las consecuentes no se lean, dando Not Found para todas las rutas. . En cuanto al componente Menu es importante que esté por dentro del componente HashRouter debido a que de esta forma va a poder consumir la información del provider. . Finalmente, se deben de realizar las importaciones correspondientes y la creación de los componentes que se renderizan en las distintas rutas. . Como estamos utilizando lo que es HashRouter si yo en la url no pongo la ruta después de /#/, entonces no va a funcionar; incluso si pongo cualquier cosa donde se supone que me responda con Not Found, me seguirá dando la página principal. .

/#/ -> HomePage
/#/blog -> BlogPage
/#/profile -> ProfilePage
/#/lalalala -> Not Found
/blog, /lalala -> HomePage

Comentarios (21)21 comentarios

Jhon Eduard Bocanegra Ortiz

Hace 4 años

Max Andy Diaz Neyra

Gaston Blanco

Seba Cardoso

Andrés Esteban Rodríguez Jiménez

Julian Franco

Arturo Mauricio Terceros Beltrán

Nicolas Forero Quevedo

Alessandra Amicarella

Ignacio Basilio

Geovanny Sneyder Paez Pabon

Angel David Contreras Barrios

Enna Velasquez Botache

Raycris Maldonado

Victor Hugo Cruz Carballo

Tomas de Miguel

Hace 9 meses

Juan Diego Mejia Maestre

Hace 10 meses

Paola Marcela Arguelles Salazar

Andres Prieto

Juan Castro

Profesor

Hace 2 años

Juan Mercado

Gualberto Montiel

Daniel Velasco

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

Primeras rutas con React Router Dom 6