Container: 404 Not Found

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

la encontre aqui freefrontend.com/html-css-404-page-templates/

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

Agosto 2023

Se deja path y se quita expect.

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 “Redirect”

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 “pá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:wght@500&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: