реагировать на маршрутизацию занимает слишком много времени

Question

import React, { Component } from "react";
import { Col, Image, Nav } from "react-bootstrap";
import { NavLink } from "react-router-dom";

class Sidebar extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    console.log("sidebar");
  }
  render() {
    return (
      <Col md={3} lg={2} className="sidebar">
        <div className="sidebarNav">
          <NavLink to="/admin/dashboard" className="active">
            <span className="icon-dashboard"></span> DASHBOARD
          </NavLink>
          <NavLink to="/admin/deliveryagentlist">
            <span className="icon-delivery-agent"></span> DELIVERY AGENTS
          </NavLink>
          <NavLink to="/admin/customerlist">
            <span className="icon-customers"></span> CUSTOMERS
          </NavLink>
        </div>
      </Col>
    );
  }
}

export default Sidebar;

Это код боковой панели в моем проекте. Проблема, с которой я сталкиваюсь, - это когда я меняю страницу, щелкая по элементам боковой панели, происходит маршрутизация. Но перенаправление страницы занимает слишком много времени

Я на панели управления. Я нажимаю на клиента на боковой панели. тогда URL-адрес в браузере изменится с http://localhost:3000/admin/dashboard на http://localhost:3000/admin/customerlist в кратчайшие сроки. Но загрузка страницы занимает слишком много времени. Страница со списком клиентов содержит некоторый исходный консольный текст в своем componentDidMount, например componentDidMount() { console.log("hey. Customer"); this.getList();}, и я заметил, что текст hey. Customer также утешается слишком поздно. Вызов API внутри this.getList() также требует больше времени для запуска.

Я предоставляю свой код маршрутизации. Он может быть связан с маршрутизацией.

MainRouting. js

import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

// Route
import PrivateRouteAdmin from "./PrivateRouteAdmin";
import PublicRoute from "./PublicRoute";

// admin
import Login from "../Component/admin/login/Login";
import AdminDashboard from "../Component/admin/dashboard/Dashboard";
import AdminCustomerTable from "../Component/admin/customer/CustomerTable";
import DeliveryAgentTable from "../Component/admin/DeliveryAgent/DeliveryAgentTable";

class MainRoute extends Component {
  render() {
    return (
      <>
        <Switch>
          <PublicRoute exact path="/" component={Login} />

          <PrivateRouteAdmin
            path="/admin/dashboard"
            component={AdminDashboard}
          />
          <PrivateRouteAdmin
            path="/admin/customerlist"
            component={AdminCustomerTable}
          />

          <PrivateRouteAdmin
            path="/admin/deliveryagentlist"
            component={DeliveryAgentTable}
          />
          <PublicRoute path="/admin/login" component={Login} />
        </Switch>
      </>
    );
  }
}
export default MainRoute;

PrivateRouteAdmin

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { getLocalStorage } from "../common/helpers/Utils";

const PrivateRouteAdmin = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      getLocalStorage("adminInfo") ? (
        <Component {...props} {...rest} />
      ) : (
        <Redirect
          to={{ pathname: "/admin/login", state: { from: props.location } }}
        />
      )
    }
  />
);

export default PrivateRouteAdmin;

PublicRoute

import React from "react";
import { Route, Redirect } from "react-router-dom";

import { getLocalStorage } from "../common/helpers/Utils";

const PublicRoute = ({ component: Component, restricted, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props =>
        getLocalStorage("adminInfo") ? (
          <Redirect to="/admin/dashboard" />
        ) : (
          <Component {...props} />
        )
      }
    />
  );
};

export default PublicRoute;