React Suspense не работает при импорте резервного компонента - PullRequest
Новая
       18

React Suspense не работает при импорте резервного компонента

0 голосов
/ 03 августа 2020

Я создал компонент LoaderPage, который выглядит следующим образом 

import theme from "../../assets/styles/globalStyles"
import Loader from "react-loader-spinner"
import React from "react"
import styled from "styled-components"

const Background = styled.div`
    display: "flex",
    align-items: "center",
    justify-content: "center",
    height: "100vh",
    background-color: ${theme.secondary}
`

export default function LoaderPage() {
    return (
        <Background>
            <Loader type="TailSpin" color={theme.primary} height={100} width={100} />
        </Background>
    )
}

Я пытаюсь использовать его как запасной компонент для моего Suspense в моем компоненте маршрутизатора, но компонент LoaderPage не появляются перед загрузкой любого другого компонента с отложенной загрузкой 

import React = require("react")
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom"
const LoaderPage = import("../../pages/LoaderPage")
const LoginPage = React.lazy(() => import("../../pages/LoginPage"))

import PrivateRoute from "../Router/privateRoute"

export default function SNRoutes(): any {
    return (
        <Router>
            <React.Suspense fallback={LoaderPage}>
                <Switch>
                    <PrivateRoute exact path="/" component={LoginPage} />
                    <Route exact path="/login" component={LoginPage} />
                    <Redirect from="*" to="/" />
                </Switch>
            </React.Suspense>
        </Router>
    )
}

Когда я копирую-вставляю компонент LoaderPage и сохраняю его в моем компоненте Router вместо его импорта, он работает '.

Помогите, пожалуйста.

1 Ответ

0 голосов
/ 03 августа 2020

const LoaderPage = import("../../pages/LoaderPage") - это динамический c импорт, который возвращает обещание. Фактический LoaderPage можно получить с помощью: 

let LoaderPage = null;
const LoaderPagePromise = import("../../pages/LoaderPage");
LoaderPagePromise.then(module => LoaderPage = module.default);

Это не будет работать должным образом с <Suspense fallback={LoaderPage}>

Вместо этого вы должны использовать этот импорт: 

import LoaderPage from "../../pages/LoaderPage";
...