javascript - 反应路由耗时太长

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;

公共路线

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;

标签： javascriptreactjsreact-router