Container: 404 Not Found

Clase 6 de 29 • Curso de React Router 5 y Redux

Resumen

Es importante siempre tener una ruta que renderice un componente para las urls que no existan, debemos añadir esta ruta al final del Switch para que sea el caso por default.

Fragment nos permite no añadir elementos extra al DOM, podemos utilizar Fragment de 2 maneras:

Añadiendo el componente o .
O implemente encapsulando nuestros elementos dentro de <>.

Seba Cardoso

student•

Si quieren unos bonitos templates para informar un mensaje 404 aquí dejo.

Alejandro González Reyes

student•

Excelente, mas recursos como estos por favor

Oscar Barajas Tavares

Team Platzi•

Yo igual comparto un proyecto algo viejo, pero es un 404 con animaciones.

https://github.com/gndx/G404Error

Santi Dalmasso

student•

Archivo .jsx

import React from 'react';
import '../assets/styles/components/NotFound.scss'

const NotFound = () => (
  <section className="error">
    <section className="error__container">
      <h2 className="error__container--title">404</h2>
      <p>Página no encontrada</p>
    </section>
  </section>
)

export default NotFound;

Archivo .scss

.error{
  background: linear-gradient(#21C08B, #AB88AB);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0px 30px;
  min-height: calc(100vh - 180px);
}
.error__container{
  display: flex;
  color: white;
  align-items: center;
  flex-direction: column;
  font-size: 16px;
}
.error__container--title{
  font-size: 60px;
  margin: 0;
  animation-name: latido;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
@keyframes latido{
    0%{
        transform: scale(1)
    }
    25%{
        transform: scale(1.6)
    }
    50%{
        transform: scale(1)
    }
    100%{
        transform: scale(1)        
    }
}

Bernardo Aguayo Ortega

student•

gracias bro!!

Rhay Simbaña

student•

En el caso que con Linux, salga un espacio morado en el pie de página, corrijan lo siguiente:

min-height: calc(100vh)

Laura Camila Pregonero

student•

Hola Todos, este es mi error 404

Leonel Moyano

student•

WOW, Que genial, podrias compartir tu repositorio? Me encantaria ver el código detras de tremenda maravilla

Henry Caicedo Velasco

student•

Esta genial!

Marco Luna

student•

En mi caso si metí mi página de error del curso de Frontend:

Mi componente

Mi SASS

Mi container NotFound

La vista final en el navegador

Mi pregunta ahora, esto sería correcto al hacer los containers en el caso del error? Si metí el React.Fragment por hacer el retorno de más componentes

Manuel Rivera

student•

El React.Fragment simplemente se utiliza para evitar agregar etiquetas que no cumplen ninguna función, como el div, ya que en react debemos solo retornar un elemento. En tu caso estas devolviendo un solo elemento ya que tienes un tag section que envuelve los demas tags y retornas un solo elemento. No necesitas Fragment.

Marco Luna

student•

Muchas gracias Manuel. Saludos

Nadir Antonio Soza Solis

student•

Algo adicional que no se menciona en el vídeo y que es muy importante es que los <Route> sin PATH deben ir al final de las definiciones de <Route> con PATH. Asi evitamos que siempre se muestre el componente que se llama en el <Route> sin PATH.

Incorrecto

    <BrowserRouter>
      <Layout>
        <Switch>
          <Route component={NotFound} />
          <Route exact path='/' component={Home} />
          <Route exact path='/about' component={AboutMe} />
        </Switch>
      </Layout>
    </BrowserRouter>

Correcto

  <BrowserRouter>
      <Layout>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route exact path='/about' component={AboutMe} />
          <Route component={NotFound} />
        </Switch>
      </Layout>
    </BrowserRouter>

Paula Alarcon

student•

Hola, yo deje mi codigo como lo dejaste tu, con exact a los route de los componentes y paginas que quiero mostrar con un ruta, y al final deje el que no tiene path, mi 404 PERO... se me ve igual en las paginas con path...

Nadir Antonio Soza Solis

student•

Hola pau-halcon,

Pues compartir una imagen o dar mas detalle, no comprendo bien cual es tu problema.

Lucas Madrigal Beltran

student•

Para la nueva version de react router dom en path debemos pasar el valor ++' * '++.. quedando asi el elemento route:

Joel Spinelli

student•

gracias!

Israel Urbina

student•

Me encanto la forma de usar el React.Fragment como mencionas se ven mejor y mas facil de ponerlo y rapido Exelente!

<>
<h1>404</>
<h2>No se encontro la pagina</>
</>

Maria Elizabeth Minero Alvarenga

student•

César Ernesto Rivas Martínez

student•

No me gusta la forma sintetizada. XD

Julian Henao Henao

student•

Me pasa igual jaja. Parece un error, se ve mal.

Gonzalo Pimentel

student•

Seguimos!

Esteban Guzmán Ramírez

student•

Las clases serian mas cortas si cada vez que hay que importar y crear un componente se usaran snipets. Entiendo no usarlos cuando se aprende lo básico de React pera para este curso se ahorraría tiempo, incluso algunos errores que suman en el tiempo de la clase.

Oscar Barajas Tavares

Team Platzi•

Gracias por tu feedback, he estado considerando lo que me comentas y lo vamos a poner en practica en futuros cursos tanto mios como de otros profesores. gracias por tu aporte.

Alejandro González Reyes

student•

Haber si voy entendiendo, react-router-dom es lo que hace que nuestros componentes se comporten como una SPA?

Oscar Barajas Tavares

Team Platzi•

Si, hay mas técnicas, pero esta es una que permite crear un SPA.

Carmen Sánchez Salgado

student•

Perdón, pero ¿porqué? ¡no entiendo! :'(

Usuario anónimo

user•

Saben como puedo hacer que mi boton me lleve al home?

Usuario anónimo

user•

dos clases adelante se resuelve la duda!

Martin Munilla

student•

respondo para aportar al resto, con

<Link to="/">asdasd</Link>

Arturo Mauricio Terceros Beltrán

student•

Así me salio.

Jesus Espino

student•

Tengo un problema, cuando voy a la url http://localhost:8080/azul se muestra mi componente NotFound de manera correcta, pero si voy a la url http://localhost:8080/azul/rojo no se muestra mi componente (solo se muestra el index.html base con el div con id = "app", es decir la pagina en blanco).

<BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
        <Route component={NotFound} />
      </Switch>
</BrowserRouter>

Brandon Ortiz Álvarez

student•

Revisa bien tu componente not found! y como lo estas llamando, seria mas util si compartes tu codigo del componente!Asi podria ayudarte mas

Samuel Miranda Martínez

student•

La respuesta a esta pregunta esta en el video de Arreglando la funcionalidad del player.

Que es agregarle al archivo de configuración de webpack la propiedad publicPath en los output

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },

Duvier Reinosa Pelaez

student•

Lo hice de la siguiente manera, Utilizando el comodín de *

    <BrowserRouter>
        <Routes>
            <Route exact path="/" element={<Home/>}></Route>
            <Route path="/login" element={<Login/>}></Route>
            <Route path="/register" element={<Register/>}></Route>
            <Route path="*" element={<NotFound/>}></Route>
        </Routes>
    </BrowserRouter>

Joseph Manuel Salen Pantoja

student•

:green_heart:

Imagen cortesia de: StyorySet.

Orlando Manuel Mendoza Vargas

student•

Aquí está mi 404 Not Found!!! 😂😂😂

Manuel Entrena Jimenez

student•

Seguimos!

Karl Behrens Gil

student•

Buenisima React.Fragment

Container: 404 Not Found

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto