0

I have following code in my App.js file, the idea is to lazy load elements if they have the permissions to do so:

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>
    );
}

When I run this code I get the following React error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Has anyone got any ideas on how to fix this error? Is it something to do with the lazy load library?

Any ideas or help would be appreciated.

Thanks.

cwiggo
  • 2,541
  • 9
  • 44
  • 87

0 Answers0