javascript - react悬念如何保持在同一页面-LazyLoading

Question

我怎样才能让 Reacts Suspense 不显示任何回退而是保持在同一页面上这就是我的

return (
      <Router>
        <Provider store={store}>
          <Fragment>
            <Switch>
              <Layout>
                <Suspense fallback={<BusyIndicator />} maxDuration={5000}>
                  <PrivateRoute
                    exact
                    path="/en/account/dashboard"
                    component={Home}
                  />
                  <PrivateRoute exact path="/en/books" component={Books} />
                  <PrivateRoute
                    exact
                    path="/en/account/quiz"
                    component={Quiz}
                  />

                  <PrivateRoute
                    exact
                    path="/en/account/quiz/:slug"
                    component={QuizDetail}
                  />
                  <PrivateRoute
                    exact
                    path="/en/account/quiz/:slug/result"
                    component={QuizResult}
                  />

                  <PrivateRoute
                    exact
                    path="/en/account/my-books"
                    component={MyBooks}
                  />
                  <PrivateRoute
                    exact
                    path="/en/account/logout"
                    component={Logout}
                  />
                  <RedirectRoute
                    exact
                    path="/en/register"
                    component={Register}
                  />
                  <RedirectRoute exact path="/en/login" component={Login} />
                </Suspense>
              </Layout>
              <Route component={NoMatch} />
            </Switch>
          </Fragment>
        </Provider>
      </Router>
    );

我想要的是页面呈现它所在的相同组件，直到它获取下一个 block ，也许像 youtube 一样有一个顶部进度条

Answer 1

@NduJay 我认为您正在寻找的是解析器。参见 https://www.npmjs.com/package/react-resolver

基本上这个概念是下一个组件在满足显示它的数据要求之前不会呈现。