React.lazy 和自定义 protectedRoute 与 router-react-dom，如何让它工作？

Question

我是 React 新手，正在尝试 React.lazy 和 Suspense 导入，我不得不说，我喜欢它们！我的网站性能从 45% 提高到 50-60%，而且还没有优化图像！谷歌搜索结果，我来了！

但是，我有一个问题，我不知道如何延迟加载在我的自定义 ProtectedRoute 和 React-router-dom v5 中呈现的组件。

当我使用 React-router-doms 本机路由时，延迟加载起作用并生效，但是当我想通过自定义受保护路由中的一个加载受保护组件时，什么也没有发生，控制台或网站上没有错误消息，只是白屏。我怀疑导入和代码放置在错误的位置存在一些问题。

APP

import React, { Suspense } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ProtectedRoute from "./pages/middleware/ProtectedRoute";

const Login = React.lazy(() => import("./pages/Login"));
const WebsiteCRUDs = React.lazy(() => import("./pages/WebsiteCRUDs"));

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
                {/* This one works */}
          <Suspense fallback={<div>Loading</div>}>
            <Route exact path="/admin" component={Login} />
          </Suspense>
                {/* This one does NOT work */}
          <Suspense fallback={<div>Loading</div>}>
            <ProtectedRoute exact path="/admin/crud" component={WebsiteCRUDs} />
          </Suspense>
          </Switch>
      </Router>
    </div>
  );
}

export default App;

保护路由：

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

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const [isAuth, setIsAuth] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  // Logic validation goes here with redirect if user is not auth.

  return (
    <Route
      {...rest}
      render={(props) =>
        isLoading ? (
          <h1>Checking Validation</h1>
        ) : isAuth ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: "/admin", state: { from: props.location } }}
          />
        )
      }
    />
  );
};

export default ProtectedRoute;

Answer 1

请尝试这样

import React, { Suspense } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ProtectedRoute from "./pages/middleware/ProtectedRoute";

const Login = React.lazy(() => import("./pages/Login"));
const WebsiteCRUDs = React.lazy(() => import("./pages/WebsiteCRUDs"));

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Suspense fallback={<div>Loading</div>}>
            <Route exact path="/admin" component={Login} />
            <ProtectedRoute exact path="/admin/crud" component={WebsiteCRUDs} />
          </Suspense>
          </Switch>
      </Router>
    </div>
  );
}

export default App;