javascript - 在基于权限的函数中渲染时反应延迟加载失败

Question

我的 App.js 文件中有以下代码，如果他们有权这样做，则想法是延迟加载元素：

import React from 'react';
import { Suspense, lazy } from 'react';
import {
    Router,
    Switch,
    Route
  } from "react-router-dom";
import { Page404 } from './Pages/Page404';

const HomePage = React.lazy(() => import('./Pages/HomePage'));
const UserPage = React.lazy(() => import('./Pages/UserPage'));
const AboutPage = React.lazy(() => import('./Pages/AboutPage'));

function GetUsersPage(title, hasPermission){

    return (
    <div>
        <Suspense fallback={<div>Loading...</div>}>
            { hasPermission ? <UserPage title={title} /> : <Page404 /> }
        </Suspense>
    </div>
    );
}
function GetAboutPage(title, hasPermission){

    return (
    <div>
        <Suspense fallback={<div>Loading...</div>}>
            { hasPermission ? <AboutPage title={title} /> : <Page404 /> }
        </Suspense>
    </div>
    );
}
function GetHomePage(title, hasPermission){

    return (
    <div>
        <Suspense fallback={<div>Loading...</div>}>
            { hasPermission ? <HomePage title={title} /> : <Page404 /> }
        </Suspense>
    </div>
    );
}

export default function App() {
    return (
        <Router>
            <Switch>
                <Route path="/about">
                    { GetAboutPage('About', true) }
                </Route>
                <Route path="/users">
                    { GetUsersPage('Customers', false) }
                </Route>
                <Route path="/">
                    { GetHomePage('Home Page', true) }
                </Route>
            </Switch>
        </Router>
    );
}

当我运行此代码时，我收到以下 React 错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

有没有人对如何解决此错误有任何想法？它与延迟加载库有关吗？

任何想法或帮助将不胜感激。

谢谢。