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.