¿Cómo configurar la página 404 en React Routing?

Cada sitio web necesita una página 404 si la URL no existe o la URL podría haber sido modificada. Para configurar una página 404 en el enrutamiento angular, primero debemos crear un componente para mostrar cada vez que ocurra un error 404. En el siguiente enfoque, crearemos un componente de reacción simple llamado PagenotfoundComponent. 

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app 404page

Nota: si ya instaló create-react-app globalmente a través de npm, use directamente el siguiente comando:

Su entorno de desarrollo está listo. Instalemos ahora react-router en nuestra aplicación.

Paso 2: después de crear la carpeta de su proyecto, es decir, con estilo, muévase a la misma carpeta:

cd styled

Paso 3:  Instalación de react-router-dom: react-router-dom se puede instalar a través de npm en su aplicación React. Siga los pasos que se indican a continuación para instalar react-router-dom en su aplicación React: Para instalar react-router-dom, use el siguiente comando:

 npm install --save react-router-dom

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Paso 4: Ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

Aplicación.js

import React from "react";
import {  Route, Switch, BrowserRouter } 
        from 'react-router-dom'
import Home from '.Home';
import PageNotFound from './404Page';
  
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path="*" component={PageNotFound} />
      </Switch>
    </BrowserRouter>
  );
}
  
export default App;

Inicio.js

import React from 'react';
  
const Home = () => {
    <div>
        <h1>Home Page</h1>
    </div>
}
  
export default Home;

PageNotFound.js

import React from 'react';
  
const PageNotFound= () =>{
    <div>
        <h1>404 Error</h1>
        <h1>Page Not Found</h1>
    </div>
}
  
export default PageNotFound;

Explicación: aquí la ruta para PageNotFound se proporciona dentro del enrutamiento. Aquí, cualquier ruta, excepto las rutas proporcionadas, es manejada por esta PageNotFound y nuestra plantilla HTML se muestra en el navegador. Entonces, ahora, si alguien intenta enviar una solicitud a cualquier página que no esté presente en la array de rutas, ese usuario se desplazará automáticamente a este PagenotfoundComponent.

Paso para ejecutar la aplicación: Ejecute el siguiente comando para iniciar la aplicación:

npm start

Salida: ahora abra el navegador y vaya a http://localhost:3000 , donde todo funciona bien. Ahora vaya a http://localhost:3000/anything , donde obtendremos el error 404 como se muestra a continuación.