React Router DOM

Clase 10 de 30 • Curso de React 17 con Webpack 5 y Sass

Braulio Rivas Abad

student•

¿Qué es router en React?

Debido a que React es de tipo SPA(single page application), no recarga la página cuando cambiamos de url. Sin embargo, router nos ayuda a crear otra página para poder navegar en nuestra aplicación. Imagina twitter web, cuando das click en un tweet, se abre otra sección donde puedes ver el tweet. Sería un problema que al momento de darle click, no cambie la url, por lo que ese tweet no tiene dirección propia, no se guardaría en tu historial y sería un problema el SEO. Para ello, usamos router, que se encargará de administrar esta situación, donde en el momento que abras el tweet, cambie la URL, pero todavía mantenga ese dinamismo y rapidez de una SPA.

¿Entonces qué es ReactRouterDOM?

#Para instalar
npm install react-router-dom

//import en App.jsx
import { BrowserRouter, Switch, Route } from 'react-router-dom';
// usaremos esas 3 herramientas

ReactRouterDOM te permite implementar enrutado dinámico en la aplicación. Nos facilita pues podemos enrutar nuestra app basada en componentes de la app (como login o recoverypassword).

const App = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Layout>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/login" component={Login} />
                    <Route exact path="recovery-password" component={Recoverypassword} />
                    <Route component={NotFound} />
                </Layout>
            </Switch>
        </BrowserRouter>
    );
}

¿Qué estamos haciendo?

BrowserRoute sirve para implementar router en el navegador

Switch regresa la primera ruta que coincida. En pocas palabras, si estamos en www.platzi.com/contacto , regresará el componente que coincida a este (es decir, el componente que contenga la lógica de contacto). En esta caso, estamos poniendo varios routes dentro de switch, ¿para qué? para que solamente traiga esa misma ruta, y no tenga que buscar más. Como si fuese un condicional switch de javascript efectivamente. Y por ello tenemos un route sin path, que será el valor por defecto.

Layout solamente renderizará el route que coincida efectivamente con la URL especificada.

Royner Yave Perez Urbina

student•

Con tu aporte entendí mucho mejor esta clase, muchas gracias!

Luis Alejandro Vera Hernandez

student•

Ohh!! Muchas gracias! Me quedo muchas gracias con tu aporte!

Martín David Roldán

student•

React Router ya se encuentra en la versión número 6 y presenta algunos cambios con lo realizado en la clase.

Switch

Switch no se encuentra más disponible en esta nueva versión, se debe reemplazar por Routes. . ++Ejemplo++:

import { Routes } from 'react-router-dom'

<BrowserRouter>
        <Routes>
           <Layout>
               ... Code
          </Layout>
        </Routes>
    </BrowserRouter>

Route

Para crear una nueva ruta en nuestra aplicación seguiremos usando Route, solo que cambiaremos la manera de llamar al componente mediante component={} a element={}. . Ejemplo:

// Atención al detalle que ahora al componente se lo llama mediante <.../> dentro de los {...}
<Route exact path="/login" element={ <Login /> } />

. Si se quiere utilizar lo mismo que en la clase, deben instalar una versión de React Router inferior a la 6.

Martín David Roldán

student•

Todo se encuentra en la documentación que pueden ver aquí 🎉

Luis Felipe Del Risco Racero

student•

Muchas gracias compañero.

Obed Paz

student•

Hay algo importante aca que quiero mencionar, en la mayoria de cursos de Oscar él instala dependencias y librerias externas y escribe en la terminal como si los tubiera memorizados (o al menos asi lo enseña).

. Creo fuertemente que se debe enseñar a leer la documentacion de lo que este usando, mostrar que él la tiene a mano mientras trabaja y aconsejar a los demas hacer lo mismo. En este caso React Router en su version 6 tiene bastantes cambios, si alguien viene a este curso a tomarlo como una introduccion va a quedar muy perdido si no fuera por los aportes.

Elias Moises Jimenez Lopez

student•

totalmente de acuerdo contigo compañera

Jimer Samuel Espinoza

student•

totalmente de acuerdo!

Carlos Antonio Espin Constante

student•

Hola! Estaba haciendo un proyecto personal y me topé con la sorpresa de que han cambiado varias cosas en react-router.

Para minimizar los errores si vas a usar la nueva versión de react-router. Especificamente para este curso, los cambios son los siguientes:

Primero:

Esta linea de código:

<Switch><Switch/> 
// ya no lo usamos

Lo cambiamos por:

<Routes><Routes/>

Segundo:

La propiedad "component" que le pasamos a las rutas se cambia por "element". De la siguiente manera:

// Así escribíamos antes la linea de código 
<Route exact path="/" component={OtroComponente} />

// Ahora lo escribimos de esta manera
<Route exact path="/" element={ <OtroComponente/> } />

Tercero:

Al valor que le pasamos a "element" ahora le agregamos los signos " < > ". Como cuando escribimos un componente en React.

// antes se escribia con "component" y su valor era solo el nombre del componente
<Route component ={otroComponente} />

// Ahora se escribe con "element" y su valor envuelto en " < > "
<Route element={<otroComponente/>} />

Espero se haya solucionado algún error que te haya arrojado este cambio.

Saludos 🚀

Irving Juárez

student•

Gracias, eso era el porque de mis errores en la consola :p

Gustavo Garcia Luna

student•

Hey Antonio Muchas gracias me quedo clarisimo con tu explicación.

Soraimar Claivel Bernal Camacho

student•

Componentes pilares de React Router

BrowserRouter: Este componente es el encargado de envolver nuestra aplicación dándonos acceso al API historial de HTML5 (pushState, replaceState y el evento popstate) para mantener su UI sincronizada con la URL.
Switch: Este componente es el encargado de que solo se renderice el primer hijo Route o Redirect que coincide con la ubicación. Si no usar este componente todos los componentes Route o Redirect se van a renderizar mientras cumplan con la condición establecida.
Route: Con Route podemos definir las rutas de nuestra aplicación, quizás sea el componente más importante de React Router para llegar a comprender todo el manejo de esta librería. Cuando definimos una ruta con Route le indicamos que componente debe renderizar. Este componente cuanta con algunas propiedades:
- Path: la ruta donde debemos renderizar nuestro componente podemos pasar un string o un array de string.
- Exact: Solo vamos a mostrar nuestro componente cuando la ruta sea exacta. Ej: /home === /home.
- Strict: Solo vamos a mostrar nuestro componente si al final de la ruta tiene un slash. Ej: /home/ === /home/
- Sensitive: Si le pasamos true vamos a tener en cuenta las mayúsculas y las minúsculas de nuestras rutas. Ej: /Home === /Home
- Component: Le pasamos un componente para renderizar solo cuando la ubicación coincide. En este caso el componente se monta y se desmonta no se actualiza.
- Render: Le pasamos una función para montar el componente en línea.

https://johnserrano.co/blog/aprende-a-crear-rutas-con-react-router

Luis Fernando Nuñez Rangel

student•

Switch no disponible en React-router-dom 6

Un aporte a los nuevos que tomen el curso en 2021, el componente Switch ya no esta disponible para iterar en las rutas que debemos de usar.

Para instalar React-router-dom v6

npm install react-router-dom@6

Posteriormente podemos inicializar nuestra configuracion de rutas.

Importamos los paquetes

import react from 'react';
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";

Estructuramos las Rutas

const App = () = >{
	return(
		<BrowserRouter>
			<Routes>
				<Route path='/' element={Login}/>
			</Routes>
		</BowserRouter>
	);
}

José Luis Ramírez Ruiz

student•

Gracias por el aporte, me ayudo mucho!!!

Luis Oscar Sequera Contreras

student•

y para los que estamos a segunda mitad de 2022? XD

Usuario anónimo

user•

Código nuevo para los que tengan problemas con React Router v6

import React from 'react';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import Layout from '../containers/Layout';
import Login from '../containers/Login';
import RecoveryPassword from '../containers/RecoveryPassword';
import '../styles/global.css';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Layout>
          <Route path="/" element={<Home />} />
          <Route path="login" element={<Login />} />
          <Route path="recovery-password" element={<RecoveryPassword />} />
          <Route path="*" element={<NotFound />} />
        </Layout>
      </Routes>
      <Layout>
        <Login />
        <RecoveryPassword />
      </Layout>
    </BrowserRouter>
  );
}

export default App;

Reinaldo Mendoza

student•

Ctrl + F2 >> te selecciona todas las coincidencias de la palabra que tengas seleccionada en el documento que tengas abierto

Guadalupe Monge Barale

student•

Switch ya no está disponible. Nuestro código quedaría así

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Home from '../pages/Home.jsx';
import NotFound from '../pages/NotFound.jsx';
import Layout from '../containers/Layout.jsx';
import Login from '../containers/Login.jsx';
import RecoveryPassword from '../containers/RecoveryPassword.jsx';

import '../style/_vars.scss';
import '../style/global.css';

const App = () => {
    return (
        <BrowserRouter>
            <Layout>
                <Routes>
                        <Route exact path="/" element={ <Home /> } />
                        <Route exact path="/login" element={ <Login /> } />
                        <Route exact path="/recovery-password" element={ <RecoveryPassword /> } />
                        <Route exact path="*"  element= { <NotFound /> } />
                </Routes>
            </Layout> 
        </BrowserRouter>
    );
}

export default App;

Gracias a todos los compas que aportaron para que pudiera entender este punto

Esta es la documentación

Kadir Kevin Castillo Ancco

student•

Hola quiero dejar algunas actualizaciones para despues de instalar el react-router-dom

en codigo debe quedar asi: (ya esta probado)

import '../routes/App';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from '../containers/Layout';
import Home from '../pages/Home'
import NotFound from '../pages/NotFound'
import Rec_contrasena from '../containers/ReccuperarContraseña';

function App() {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/CorreoEnviado' element={<NotFound />} />
          <Route path='/RecuperarContrasena' element={<Rec_contrasena />} />
          <Route path='*' element={<NotFound />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
}

export default App;

espero les sirva...

Andrés Ulises Alberto Gaete Vega

student•

gracias, me sirvio

ccardenasg cardenas

student•

#porlotanto

Juan Felipe Barahona Gonzalez

student•

Hay que tener en cuenta varias cosas antes de activar las rutas:

1. Yo utilicé react-router-dom v6, por lo que las instrucciones cambian, quedando App.jsx así:

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Layout from '../containers/Layout';
import Login from '../containers/Login';
import RecoveryPassword from '../containers/RecoveryPassword';

import '../styles/global.css';

const App = () => {
  return (    
    <Layout>
      <BrowserRouter>
        <Routes>
          {/* <Route path='/' element={<Home />} /> */}
          <Route path='login' element={<Login />} />
          <Route path='recovery-password' element={<RecoveryPassword />} />
          {/* <Route path='*' element={<NotFound />} /> */}
        </Routes>
      </BrowserRouter>
    </Layout>
  );
};

export default App;

Nota: Home y NotFound están comentadas porque aún no se han implementado.

Posteriormente, cuando iba a las rutas /login y /recovery-password me aparecía un error en el navegador de tipo Cannot GET /endpoint entonces, para solucionarlo, agregúe la última línea a la sección de devServer en en el archivo config de webpack:

devServer: {
        static: path.join(__dirname, 'dist'),
        compress: true,
        port: 3005,
        historyApiFallback: true // habilitar endpoints
    }

Ref aqui

Andrés Felipe Lopez gomez

student•

Gracias Genio

Daniel Felipe Diaz Rodriguez

student•

comando

npm install react-router-dom

Ivana Palacio Torrez

student•

Holaaa, dejo link de grupo para ayudarnos y sacarnos dudas sobre js: https://chat.whatsapp.com/EbXGamz5GRt9C4dN7NNwYa

Usuario anónimo

user•

Yo me venido haciendo modificaciones en los componentes, containers y hojas de estilos. . Aquí el repo de mi proyecto hasta ahora

Jimer Samuel Espinoza

student•

10/10 de esta clase, toda la informacion adquirida y todos los aportes de mis compañeros

Francisco Javier Gómez Olguín

student•

No entiendo porque a los containers todas las clases les sigue llamando componentes ... es confuso :/

Omar Flores Grimontt

student•

Es porque si bien todos los containers son componentes no todos los componentes son containers. Cuando hablamos de containers nos referimos a un tipo de componente, su responsabilidad es acoger otros componentes para darles un orden visual, extender sus funcionalidades, abstraer cierta parte de la interfaz, etc, dependiendo de las necesidades del proyecto.

Luis Gomero

student•

Exacto, es un tipo de componente pero al final sigue siendo un componente que tendra otros en su interior (Composicion de componentes :D )

Eduardo Román Salas Cornejo

student•

no tengo error pero no me aparece el proyecto al correrlo en la terminal a que se debe

Juan Carlos Montilla Sánchez

student•

Me puedes indicar qué versión de react-router-dom estas utilizando, por favor

Darvin Emil Rodriguez Nuñez

student•

Tampoco a mi, ni siquiera ando usando el react-router y no aparece nada.

Eber Edrey Alejo Berrones

student•

En la nueva versión 6 de react router para llamar las rutas se hace de esta manera

Los imports son:

import { BrowserRouter, Routes, Route } from 'react-router-dom'

y el codigo es:

    <BrowserRouter>
      <Layout>
        <Routes>
          <Route exact path='/' element={<Home />} />
          <Route exact path='/login' element={<Login />} />
          <Route
            exact
            path='/recovery-password'
            element={<RecoveryPassword />}
          />
          <Route path='*' element={<NotFound />} />
        </Routes>
      </Layout>
    </BrowserRouter>

Carlos Massarino

student•

Buenas, tengo entendido que el exact ya no es necesario tampoco.

Manuel Ojeda

student•

En este punto para quienes ven el curso es posible que se encuentren en React 18+. Para que funcione con Router deben de leer este tutorial: https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md

React Router DOM

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js