Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Práctico de React.js

Curso Práctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

React Router DOM

9/29
Recursos

Aportes 37

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¿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.

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.

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.

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

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 🚀

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-[email protected]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>
	);
}

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

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;

#porlotanto

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

comando

npm install react-router-dom

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

COMANDO PARA QUE SE PUEDA SEPARAR POR SECCIONES

npm install react-router-dom

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…

Aclaraciones para React Router

La librería enfocada a la web al enrutado es ‘react-router-dom’. La manera tradicional que tenemos para navegar entre diferentes páginas web es con la etiqueta <a href="#" >, sin embargo, por defecto al dar click recarga la página y vuelve a descargar los recursos del servidor (puedes observarlo en la pestaña del navegador, al final de la url y en las Dev tools). Este comportamiento va en contra del concepto de SPA (Single Page Application), React Router nos facilitará el crear este tipo de aplicaciones.
.
Diferencia entre componente y elemento
En síntesis, un componente es la función que devuelve/retorna un elemento.
Componente: App
Elemento: <App />
.
Actualización a React Router 6
Con lo anterior establecido, Switch ya no tiene soporte en la versión 6, en su lugar está Routes que englobará el componente Route que recibe dos props:
-path: es la ruta que renderizará el elemento.
-element: es el elemento a renderizar cuando la aplicación se encuentre en la ruta especificada.
.

<BrowserRouter>
	<Routes>
		<Layout>
			<Route   path = " / "    element  =  {  <  Home  />  } />
			<Route   path =  "  /login  "   element  =  {  <  Login  />  } />
		</Layout>
	</Routes>
</BrowserRouter>

.
Algo que puede ayudar es tener en cuenta que Route renderizará el element cuando la ruta se encuentre en el path especificado, así como un condicional if.
.
Pueden leer más acerca de esta librería en https://reactrouter.com/docs/en/v6/getting-started/tutorial
.
Espero les haya sido de ayuda y nunca paren de aprender. 💚

No entiendo porque a los containers todas las clases les sigue llamando componentes … es confuso 😕

Creo que sería importante actualizar el curso ya que ya no se usa switch sino Routes entre otros además de agregar el comando npx create-react-app que facilita muchas cosas .

Dejo Documentación actualizada de React Router, es algo similar. Pero seguro les funcionara!

que pasa cuando un curso no se actualiza ya que muchas de las cosas utilizadas pasan a mejorar migrar o cambiar su composicion Router ha cambiado su forma de ser implementado

El route nos permite movernos de pagina en pagina teniendo un url que la identifica y manteniendo el dinamosmo del sistema. Tal es el caso de ReacRouteDom. En este caso la utilizamos para direccionar el login con el recoverypass y tmb definimos yna pagina por defecto en caso de que el usuario no encuntre la pagina solicitada dentro del sistema

npm install react-router-dom

¿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.
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).

Con la nueva version de React Router Dom quedaría algo así, o por lo menos así me funcionó xd


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

:DDDD

Asi me quedo El Router con react-router-dome V6

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

OJO
react-router-dom ya no tuiliza Switch, lo cambio por Routes

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

<BrowserRouter>
	<Routes></Routes>
</BrowserRouter>

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

Para quienes usan “react-router-dom” en su V6 o mayor Switch fue cambiado por Routes.

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

App.jsx

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 Home from '../pages/Home';
import NotFound from '../pages/NotFound';
import '../styles/global.scss';


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 path='*' element={<NotFound />} />
				</Routes>
			</Layout>
		</BrowserRouter>
	);
}

export default App;

Index.js
Versión 2022

import React from 'react';
import ReactDOM from 'react-dom';
import App from './routes/App';

ReactDOM.createRoot(
    document.getElementById('app'),
  )
  .render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  );

React Router, nos permite separar diferentes secciones de nuestro proyecto y navegar entre ellas.

Entonces el curso está desactualizado y posiblemente no funciona a la fecha dada la versión del Router. Soy nuevo en esto y me salen una cantidad de errores que no tengo ni idea de cómo solucionar.

React Router DOM es una herramienta de React que nos permite manejar distintas rutas y separar nuestra aplicación entre páginas / rutas.

Si aún haciendo los cambios de react-router 6 no les muestra las rutas a los componentes, es porque hace falta configurar el publicPath en el documento de webpackconfig. En el siguiente video muestran cómo se realiza.

Ánimo, sé que este curso puede ser frustrante por no estar actualizado, pero puedes hacerlo.

Instalacion y manejo de react router

Para los que llevan buen tiempo, con error con router

asi debe de ir en l versión 6

libro app.jsx:

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

No se si estoy equivocado, pero la funcion del componente Layout, tambien la tiene React con tan solo importar “Fragment” de ‘react’

En react v6, la version que salio hace poco, un mes + o -, <Switch> se debe cambiar por <Routes>

Importante recordar que el nombre de los componentes en react deben empezar por mayúscula, no es solo capricho del profesor