No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React Router 5 y Redux

Curso de React Router 5 y Redux

Oscar Barajas Tavares

Oscar Barajas Tavares

Container: 404 Not Found

6/29
Recursos

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:

  1. A帽adiendo el componente o .
  2. O implemente encapsulando nuestros elementos dentro de <>.

Aportes 54

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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

Hola Todos, este es mi error 404

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

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>

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

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

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

No me gusta la forma sintetizada. XD

Seguimos!

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.

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

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

As铆 me salio.

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>

馃挌

Imagen cortesia de: StyorySet.

Aqu铆 est谩 mi 404 Not Found!!! 馃槀馃槀馃槀

Seguimos!

Buenisima React.Fragment

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

Buenas!, cual seria la diferencia de hacerlo sin <React.Fragment> ???, no entendi esa diferencia, gracias!.

Buenas amigos,

Me preguntaba como renderizar el componente Notfound sin header ni footer.

Si saben, le agradecer铆a mucho 馃槂

驴qu茅 hacer cuando al ingresar React.Fragment da error?

Ilustraciones para 404: https://stories.freepik.com/

Aqui tiene un pcoo de documentacion sobre React Fragment: Click aqui

React Fragments puede recibir estilo?

Hola, estaba probando el 404, peeero tengo un peque帽o problema, mi componente 404 se muestra la final de mis otros componentes con path.
Como puedo regular esto?.

import React from 'react';

const NotFound = () => (
  <>
    <h1>No encontrado</h1>
    <h2>
      Regresa
      <a href='/'> al home</a>
    </h2>
  </>
);

export default NotFound;

//*Con esto regresamos al home

Podemos usar <React.Fragment></React.Fragment> para NO cargar HTML innecesario, por ejemplo en la p谩gina con c贸gido HTTP=404.
Una forma m谩s sencilla es utilizar los 鈥榩ico parantesis鈥 y encerramos el HTML en <> </>.

<Route component={NotFound} /> Esta l铆nea se usa para cuando introducimos un url que no existe en nuestro proyecto.

Podemos usar Link de react-router-dom para crear un bot贸n que nos haga ir al Home. Esto para cumplir con el concepto de SPA, al no tener que recargar la p谩gina.

import React from 'react'
import { Link } from 'react-router-dom'

const NotFound = () => {
  return (
    <React.Fragment>
      <h1>Not Found</h1>
      <button>
        <Link to="/">Go Home</Link>
      </button>
    </React.Fragment>
  )
}

export default NotFound

Mi 404 not found, Es muy facil animar con lottie busquenlo

Ya que tenemos nuestros elementos, podemos cometer el error de escribir una ruta que no existe y si nosotros no le mandamos informacion visual al usuario esto se vuelve un error grabe. Una forma de agregar la ruta de errores tiene que ser de la siguiente forma:

<Route component={NoutFound} />

No necesitamos pasarle alguna ruta ya que esta al no encontrarse puede ser cualquiera de las no seleccionadas.

Este componente debe establecerse con la jerarquia que estamos utilizando. En el apartado de NotFound vamos a agregar un React Fragment el cual nos permite no agregar mas elementos al DOM que nos ayudaria a nos agregar mas y mas div. Una de estas formas seria el <React.Fragment></React.Fragment> y dentro nuestro elemento. Otra forma seria solo poniendo <> </>

Batalle mucho para lograr mi pagina de errror, jeje鈥 pero pude lograrlo, asi quedo el resultado:

React.Fragment

El pan de cada dia xD

cuando hago en el navegador /home/ o /home/asdad, no va al notFound, solo quiero que funcionen las url de los Route, y TODO lo dem谩s, al notFound. PD: /hom por ejemplo si que va al 404鈥 驴alguien m谩s se ha encontrado este problema y lo ha podido solucionar?

Adicional a lo que menciona Oscar, la etiqueta **Fragment **tiene una tercera sintaxis y para utilizarla ser谩 necesario importar el componente de la librer铆a de React de la siguiente forma:

import React, {Fragment} from 'react'

//Una vez importado el componente, estar谩 disponible as铆:

<Fragment>
	//contenido JSX
</Fragment>

驴Como se ordena los c贸digos en Visual estudio por teclado?

Sent铆a que faltaba eso, el Layout.

En mi caso solamente poner Router no me funcionaba. As铆 que hice esto:

Importar 鈥淩edirect鈥

import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';```
y colocar 404 como una ruta, para despu茅s redireccionar cualquiera que no coincida:


 <Route component={Error404} exact path='/404' />
  <Redirect from='*' to='/404' />```

me volo la cabeza lo de react fragment!

En las versiones de React antes de la 16.5 en lugar de usar React.Fragment, se utiliaba un componente de orden superior que basicamente recibia children como props

const Aux = ({ children }) => children
export default Aux;

Otra forma de importar Fragment

import React, { Fragment } from 'react';

const NotFound = () => (
  <Fragment>
    <h1>Ruta no encontrada</h1>
  </Fragment>
);
export default NotFound;

Tambien se puede colocar de esta manera.

<Route exact path="/*" component={NotFound} /> 

Un peque帽o aporte.

Aparte de darle estilo al container Not Found, agregu茅 la funcionalidad de poder dar click al Logo de Platzi para regresar al Home en el caso de llegar a la Not Found

no entendi porque es importante usar el React.Fragment o poner los <>, porque si dejo solo el h1 con el texto 鈥減谩gina no encontrada鈥 igual funciona

De: React and React Native
Third Edition

Les comparto el c贸digo de la clase
containers/NotFound.jsx

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "../containers/Home";
import Login from "../containers/Login";
import Register from "../containers/Register";
import NotFound from "../containers/NotFound";

const App = () => {
	return (
		<BrowserRouter>
			<Switch>
				<Route exact path="/" component={Home} />
				<Route exact path="/login" component={Login} />
				<Route exact path="/register" component={Register} />
				<Route component={NotFound} />
			</Switch>
		</BrowserRouter>
	);
};

export default App;

assets/styles/components/NotFound.scss

@import url("https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&family=Roboto:[email protected]&display=swap");

$lime: #c5dc50;
$rasp: #f36a6f;
$seed: #383838;
$sm: 1rem;
$md: 2.5rem;
$lg: 4rem;

.not-found * {
	box-sizing: 0;
	margin: 0;
	padding: 0;
	cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4424790/cursors-edge.png"),
		auto;
}

.not-found {
	background: linear-gradient(to right, white 50%, $seed 50%);
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: white;
}

.not-found {
	display: flex;
	align-items: center;
	height: 100vh;
	max-width: 1000px;
	width: calc(100% - #{$lg});
	margin: 0 auto;
	> * {
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		max-width: 500px;
		width: 100%;
		padding: $md;
	}
}

.not-found aside {
	background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4424790/right-edges.png");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 25px 100%;
	img {
		display: block;
		height: auto;
		width: 100%;
	}
}

.not-found main {
	text-align: center;
	h1 {
		font-family: "Fontdiner Swanky", cursive;
		font-size: $lg;
		color: $lime;
		margin-bottom: $sm;
	}
	p {
		margin-bottom: $md;
		em {
			font-style: italic;
			color: $lime;
		}
	}
	a {
		font-family: "Fontdiner Swanky", cursive;
		font-size: $sm;
		color: $seed;
		border: none;
		background-color: $rasp;
		padding: $sm $md;
		transform: skew(-5deg);
		transition: all 0.1s ease;
		cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4424790/cursors-eye.png"),
			auto;
		&:hover {
			background-color: $lime;
			transform: scale(1.15);
		}
	}
}

@media (max-width: 700px) {
	.not-found {
		background: $seed;
		font-size: 16px;
	}
	.not-found {
		flex-flow: column;
		> * {
			max-width: 700px;
			height: 100%;
		}
	}
	.not-found aside {
		background-image: none;
		background-color: white;
		img {
			max-width: 300px;
		}
	}
}

routes/App.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "../containers/Home";
import Login from "../containers/Login";
import Register from "../containers/Register";
import NotFound from "../containers/NotFound";

const App = () => {
	return (
		<BrowserRouter>
			<Switch>
				<Route exact path="/" component={Home} />
				<Route exact path="/login" component={Login} />
				<Route exact path="/register" component={Register} />
				<Route component={NotFound} />
			</Switch>
		</BrowserRouter>
	);
};

export default App;

<Route component={NotFound} />

si no hay ninguna ruta establecida, va a ser render de ese componente de Not Found

![](

Una alternativa a utilizar 404 pages es redirigir al usuario al inicio. Esto se puede conseguir estableciendo la ruta de Home sin exact y poniendo esta ruta al final de Switch. Es importante ponerla al final. De este modo si el usario entra a una ruta no definida se le regresara al inicio.

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

Pr谩cticas: