¿Cómo mostrar un indicador de carga simple entre rutas en el enrutador de reacción?

Es una buena práctica mostrar una pantalla de carga mientras prepara su página para mostrar. Es muy fácil mostrar un indicador de carga simple entre rutas en react-router. 

Creando la aplicación React:

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

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Cree Home.js y App.js como se muestra en la imagen de arriba.

Implementación: 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.

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import {useState} from "react";
import Home from'./components/Home';
  
function App() {
  return (
    // Create route for each page, since we 
    // have only one page. So we are defining 
    // only one route.
    <Router>
      <Route path="/" exact component={Home} />
    </Router>
  );
}
  
export default App;

import React from "react";
import {useEffect, useState} from "react";
  
const Home = () => {
  
    // Set loading state to true initially
    const [loading, setLoading] = useState(true);
      
    useEffect(() => {
      // Loading function to load data or 
      // fake it using setTimeout;
      const loadData = async () => {
  
        // Wait for two second
        await new Promise((r) => setTimeout(r, 2000));
  
        // Toggle loading state
        setLoading((loading) => !loading);
      };
        
      loadData();
    }, [])
      
    // If page is in loading state, display 
    // loading message. Modify it as per your 
    // requirement.
    if (loading) {
        return <div>Loading....</div>
    }
      
    // If page is not in loading state, display page.
    else {
        return <h1>Home</h1>
    }
}
  
export default Home;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Resultado