React-Router 嵌套路由上的 React Suspense Loader 问题

Question

我有我的 React 应用程序设置路由器，它看起来像下面的代码。我的应用程序看起来像在路由转换期间重新加载整个页面，因为 header 完全在 Suspense 中，该部分已被替换为“ Fallback ”，然后替换为原始内容。

<App>
    <BrowserRouter> 
        <Supsense fallback={Fallback}>
            <Header>
            <Route component={Settings} path="/settings"  />
            <Route component={HomePage} path="/" exact />
        </Supsense>
    </BrowserRouter>
</App>

在设置页面里面，我还有一个子路由

const Users = lazy(() => import("./organization"));
const Organization = lazy(() => import("./users"));

const Settings = ()=>{
    return (
        <Fragment>
        <h1>Settings </h1>
          <Route path={`${match.url}/organization`} component={Organization} />
          <Route path={`${match.url}/users`} exact component={Users} />
        </Fragment>
    )
}

Answer 1

React.Lazy 总是在 React.Suspense 组件中呈现，可以在嵌套路由周围放置另一个 Suspense 扭曲，代码应该是

const Users = lazy(() => import("./organization"));
const Organization = lazy(() => import("./users"));

const Settings = ()=>{
    return (
        <Fragment>
            <h1>Settings </h1>
            <Suspense fallback={<AnotherFallBack />}>
            <Route path={`${match.url}/organization`} component={Organization} />
            <Route path={`${match.url}/users`} exact component={Users} />
            </Supense>
        </Fragment>
    )
}

React-Router 嵌套路由上的 React Suspense Loader 问题

React Suspense Loader issue on the nested routes with React-Router

lazy-loading

nested-routes

reactjs

react-router