Реагировать на неудачную загрузку при рендеринге внутри функции на основе разрешений - PullRequest
Новая
       56

Реагировать на неудачную загрузку при рендеринге внутри функции на основе разрешений

0 голосов
/ 03 марта 2020

У меня есть следующий код в моем файле приложения. 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>
    );
}

Когда я запускаю этот код, я получаю следующее Ошибка реагирования:

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: object.

Кто-нибудь получил какие-либо идеи о том, как исправить эту ошибку? Это как-то связано с библиотекой отложенной загрузки?

Буду признателен за любые идеи или помощь.

Спасибо.

...