Navegación entre rutas

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

Gabriel Bracamonte

student•

Muy importante, a partir de las mas nuevas versiones de ‘react-router-dom’ el Switch fue cambiado por ‘Routes’ entonces el import quedaria asi"

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

Tambien en vez de "component en el atributo de Route, ahora es "element" y se le pasa el elemento, la estructura asi:

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

Sebastian Nevado

student•

Muchas gracias!

Luis Alejandro Vera Hernandez

student•

Tremendo aporte, como se esta uno atento de esas actualizaciones?

Joel Campos

student•

Para los que instalaron react-router-dom version 6 el código quedaría así

Nilthon Enciso Cantero

student•

Gracias por compartirlo, no me aparecía nada porque olvidé colocar los componentes como tales. Con tu comentario lo pude resolver 👌🏼

Jean León

student•

Gracias, ya no hace falta poner exact?

Neidys Betancourt

student•

Aquí mi página de error 404

Reinaldo Mendoza

student•

Siguiendo el estilo de la pagina, genia!!!

Jesús Alfonso León Luna

student•

Muy chévere. Tú misma diseñaste la imagen?

Tan Zuñiga

student•

Así quedó mi pagina de error 🤗

Reinaldo Mendoza

student•

Me gusta, buen detalle el rebote

LUIS GILBERTO ALVAREZ MARIN

student•

Muy chevere, felicitaciones!

Leda Michelle Huerta Recinas

student•

Si no te funciona, revisa tu package.json, busca el objeto dependencies y dentro react-router-dom, ahí viene la versión de la librería que instalaste, en mi caso es:

"react-router-dom": "^6.2.1",

Cambios a partir de la versión 6:

Switch deja de funcionar, se sustituye por Routes, cambialo en tu import y en el wrapper:

//Cambia el import:
import { BrowserRouter, Routes, Route } from "react-router-dom";
//Wrapper:
    <Routes>
    		<Route path="/" element={<Home />} /> 	  	
	</Routes>

Se elimina el uso del atributo exact y se sutituye el atributo component por element. element recibe la sintaxis de componente, no solo su nombre.
```
//Con exact y component:
<Route exact path="/" component={Home} />
//Con element:
<Route path="/" element={<Home />} /> 
```

No match: Debe recibir * como path.

     	<Route path="*" element={<NotFound />} />

Les dejo el código completo:

import React from "react";
import "../styles/global.css";

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";

const App = () => {
  return (
    <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>
  );
};

export default App;

Luis Julian De La Torre Aguilar

student•

Gracias, no me salia el not found 🤣🤣🤣🤣🤣

Rodolfo Vera

student•

Gran aporte.... ¡me has salvado, estoy agradecido! No me salía nada hasta que intenté las instrucciones que amablemente dejaste por aqui... ¡GRACIAS!

Kristopher Morales Zamudio

student•

Aqui esta mi 404 super Profesional

Kevin Salazar

student•

jajajaj buena!

John F Chacpi Marchena

student•

que genio jajajaja

Jairo Jair Jasón Pozo Pérez

student•

Realice algo simple

NotFound.jsx

        <div>
            <h1 className="title-404">404</h2>
            <p className="text-404">Oops! Pagina no encontrada.</p>
            <a className="button-404" href="#">Regrese a la página inicial, es mejor.</a>
        </div>

Además recuerden realizar la importación del scss

import '../styles/NotFound.scss'

NotFound.scss

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500);

.button-404 {
  font-weight: 300;
  background-color:var(--hospital-green);
  color: var(--white);
  font-size: 1.2em;
  text-decoration: none;
  border: 1px solid #efefef;
  padding: .5em;
  border-radius: 3px;
  float: left;
  margin: 0 0 0 -168px;
  left: 50%;
  position: relative;
  transition: all .3s linear;
}

.text-404 {
  font-size: 2em;
  text-align: center;
  font-weight: 100;
}

.title-404 {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  text-align: center;
  font-size: 10em;
  font-weight: 100;
}

Luis Oscar Sequera Contreras

student•

Muchas gracias por tu aporte.

Luis Oscar Sequera Contreras

student•

Te puedo aportar a tu código que agregues un "./" en el href, para que así el botón al darle click redirija hacia el home como debe ser, quedando así:

<a className="button-404" href="./">Regrese a la página inicial, es mejor.</a>

Ya lo probé, y sí funciona. Saludos.

Pablo Andres Fajardo Ruano

student•

Asi quedo el mio jj

Lucas Aristizábal

student•

se ve tan clean que no creo que lo hayas hecho ajaj

Soe Lucas

student•

El mejor que he visto !!!

Rodolfo Vera

student•

En mi caso yo tengo la versión: "react-router-dom": "^6.2.2"

Como bien dicen en los comentarios. Switch ya no se usa y también se omite el parámetro "exact". Por consecuencia ahora se usa de otra forma.

Les dejo como quedó mi ejemplo completo

import React from 'react';
import '../styles/global.css';

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';

const App = () => {
  return (
    <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>
  );
};

export default App;

LEONARD CUENCA

student•

Datasoooooooooooooooooo excelente servicio ☆ ☆ ☆ ☆ ☆

Ariadna Barreto

student•

Gracias, me pasó lo mismo.

Emanuel Catriquil

student•

Hace falta agregar path="*" al ultimo Router para que pueda renderizar el componente NotFound 👍

Zaidibeth Ramos

student•

Not working anymore

Kenneth Angulo L

student•

Me tomo un tiempo conectar el rompecabezas con todas las actualziaciones que han ocurrido, aqui dejo un resumen:.

Ano 2022:

Hace unas semanas salio React18
React router dom esta en su version 6 RRD6

. Entonces: En el archivo index.js

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

// ESTO YA NO FUNCIONA
// ReactDOM.render(
//     <App />,
//     document.getElementById('root')
// );

//AHORA ES ASI
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App tab="home" />);

Modificacion de las rutas En el archivo App.jsx

import React from 'react'
import { BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
import PasswordRecovery from '../containers/PasswordRecovery';
import NotFound from '../pages/NotFound';
import Layout from '../containers/Layout';
import Login from '../containers/Login';
import Home from '../pages/Home';
import '../styles/global.css';

const App = () => {
    return (
        <BrowserRouter>
            <Layout>
                <Routes>
                    <Route path="/" element={<Home/>} />
                    <Route path="/home" element={<Navigate to="/" />} />
                    <Route path="/login" element={<Login />} />
                    <Route path="/password-recovery" element={<PasswordRecovery />} />
                    <Route path="*" element={
                    	<div style={{ padding: "1rem" }}><p>There's nothing here!</p></div>
                    }/>
                </Routes>
            </Layout>
        </BrowserRouter>
    );
};

export default App;

Por si acaso, otras rutas de ejemplo que les pueden ser utiles, para otros casos

 {/* ----------------  otros ejemplos -----------------*/}
<Route path="/path/:parametro" element={<Posts/>} />
<Route path="/anidamiento/*" element={<Dashboard/>}>
             <Route path="ruta1" element={<Users/>} />
             <Route path="ruta2" element={<Posts/>} />
</Route>

 {/* ejemplos con redirect ahora (rrdom-6) es navigate */}
<Route path="/not-found" element={<NotFound />} />
<Route path="*" element={<Navigate to="/not-found" />} />

Julian Franco

student•

Muchas gracias, me puedes explicar por favor dos cosas, la primera a mi me error con Layaout y la segunda

Esta parte

 tab="home"

Que es lo que hces con esto ?

Kenneth Angulo L

student•

Cual error te esta saliendo, si puedes compartirlo por favor.

A mime pasaba un error antes y era por esto:

En las reglas del React Router Dom, dicen que dentro del componete <Routes> solo pueden vivir componentes <Route> asi:

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

Entonces verificar que el <Layout> esta afuera de <Routes> para que no interfiera con las rutas. Como muestro en el codigo de ejemplo. . Bueno y por otro lado, lo del tab="home" es solo un ejemplo, el codigo lo saque de la guia de actualizacion de react 18 y asi estaba escrito. Realmente eso no lo necesitamos, olvide borarlo. . Esto lo que esta haciendo es pasarle por props al componente App el valor home Aunque la documentacion no esta clara, creo que esto se usa para cuando usemos navegacion por tabs, es util cuando se hacen aplicaciones para movile.

Marlon Estiben Varon Gonzalez

student•

Utilizando Link de react-router-dom

import React from 'react';
import { Link } from 'react-router-dom';
import '../styles/NotFound.scss';

export const NotFound = () => {
   return (
      <div className="NotFound">
         <img
            src="https://i.pinimg.com/originals/86/41/80/86418032b715698a4dfa6684b50c12af.gif"
            alt=""
         />
         <Link to="/">
            <h2>Return to Home</h2>
         </Link>
      </div>
   );
};

Leda Michelle Huerta Recinas

student•

Así quedó mi página NotFound:

Elber Liebermen

student•

Está increíble jajajaja

Kevin Palma

student•

Asi quedo el reto de la pagina de error 404

Y al hacer Hover al enlace el fantasmita se anima..!

Trate de usar los colores que tiene el proyecto para no afectar o que no se vea un poco extraño..!

Jesus Abelardo Montejo Martinez

student•

muy bueno

Hernán David Mercado Fernández

student•

Encontré este recurso en linea para agragar un 404 más animado, aunque si no tienes mucha destreza con html y css es recomendable hacerla desde cero para adquirir agilidad.

https://plantillashtmlgratis.com/en/categoria/css-code/css-404-page/

Nazareno Aznar Altamiranda

student•

Bueno, por lo que averigue historyApiFallback conecta nuestra app con html5 History api, la cual nos ayuda a manejar el historial de navegacion y a reconocer las rutas que estamos manejando.

Pero historyApiFallback es una librería aparte que fue creada para solucionar ciertos problemas de usabilidad que traía por defecto History API, que no llegué a entender del todo.

Si dejamos la opcion por defecto (false) podemos conectarnos al home, pero no va a reconocer las demás rutas que usemos, por lo que es de vital importancia tener esta opcion activada

Si saben de esta API o librería y quieren ayudarme a aclarar cómo es su funcionamiento exacto les estaré agradecido

Achraf Mharmel

student•

Curso bastante desactualizado, si no es por los comentarios uno no sabria ni que hacer, muchas cosas mal, en una clase pone el devServer elige puerto 3005 y en otra clase no lo tiene puesto, cosa q da problemas y si uno no se entera q es eso se vuelve loco, este curso un poco disapointed, oscar suele hacer buenos cursos..

Walter Andrei Arriaza Flores

student•

Concuerdo completamente contigo.

Santi Orduno

student•

Para los que les de este error

Probablemente cuando descarguen react-router-dom les dé una versión muy nueva y Switch no se exporta de la misma manera en versiones nuevas. Lo que yo hice para solucionar el error fue que cambie la versión de la dependencia con el siguiente comando.

npm install react-router-dom@5.2.0

La razón de que use esa versión es porque es la versión que uitiliza el maestro dentro de este curso.

Alex Guaman

student•

Me paso igual, yo modifique la version en package.json y volvi a ejecutar npm install

Gisela Haag

student•

Hola! Otra alternativa, más correcta en mi opinión, sería ya ultilizar el componente actualizado. A partir de la version 6 de React Router Dom, Switch se reemplaza por Routes, más info en https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes

saludos

Braulio Rivas Abad

student•

Aquí mi página de error 404

Ricardo Manuel Solis Vizurraga

student•

bro una pregunta queria hacerlo igual que tú cambiar el background color en scss de not found pero se me cambia el background color de todo el proyecto osea todas las otras paginas ati te pasa eso ?

Camilo Ace

student•

cri cri cri

Royner Yave Perez Urbina

student•

¿que diferencia hay entre el directorio "pages" y el directorio "containers"? En el archivo de App se usa el Home y NotFound que están en pages, y a su vez se usa Login y RecoveryPassword que están en containers :/

jose zuñiga

student•

Containers: Lo usas para definir secciones principales dentro de la App. Usa la misma lógica que usabas para estructurar Html para identificarlas. Por ejemplo la sección donde vez todas las imágenes para hacer la compra es un container por que es principal.
Components: Son las secciones o elementos mas pequeños y que puedes usar en diferentes partes de la app. Por ejemplo, cada card de un producto es un componente. Lo puedes re usar múltiples veces pero en si no es una sección completa de tu App.
Pages: Puedes verlas como una vista general de toda tu App. En este caso el Home es repetitivo para múltiples vistas de la App, lo sabes por que su diseño base se repite. Yo lo veo como el "background" donde acomodas todos los demás elementos. Por lo tanto lo defines como una pagina. El NotFound es otra pagina porque la puedes definir con un diseño diferente. Por ejemplo, al día de hoy el 404 de platzi es un astronauta. Si bien su diseño se relaciona con la pagina principal "Home", son independientes en como se ordenan.

Lucas Aristizábal

student•

containers sería entonces divs o fragments o headers o similares sobre el documento?

Navegación entre rutas

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