Javascript 在基于权限的函数内呈现时，响应延迟加载失败

我的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”导入React；
从“react”导入{suspent，lazy}；
进口{
路由器，
转换
路线
}从“反应路由器dom”；
从“./Pages/Page404”导入{Page404}；
const HomePage=React.lazy（（）=>import（'./页面/主页'）；
const UserPage=React.lazy（（）=>import（'./Pages/UserPage'）；
const AboutPage=React.lazy（（）=>import（'./Pages/AboutPage'）；
函数GetUsersPage（标题，hasPermission）{
返回(
{hasPermission？：}
);
}
函数GetAboutPage（标题、权限）{
返回(
{hasPermission？：}
);
}
功能GetHomePage（标题、权限）{
返回(
{hasPermission？：}
);
}
导出默认函数App（）{
返回(
{GetAboutPage（'About'，true）}
{GetUsersPage（'Customers'，false）}
{GetHomePage（'主页'，true）}
);
}

运行此代码时，会出现以下错误：

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：object。

有人知道如何修复这个错误吗？这与延迟加载库有关吗

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

---

谢谢。

我假设函数中缺少或未使用的参数来自与问题相关的复制/粘贴代码？（即：

GetHomePage（title）

包含一个未声明的

permission

变量。

GetUsersPage（title，hasPermission）

缺失

hasPermission

，但包含

permission

）@1978年，我更新了问题，我有几个输入错误，你能添加你的页面组件代码吗？@RezaHashemi他们只是功能组件将“路由器”更改为“浏览器路由器”，然后再次测试。