使用 React-Router 嵌套路由上的 React Suspense Loader 问题答案

【问题标题】：React Suspense Loader issue on the nested routes with React-Router使用 React-Router 嵌套路由上的 React Suspense Loader 问题
【发布时间】：2020-03-16 06:25:52
【问题描述】：

我有我的反应应用程序设置路由器，因为它看起来像下面的代码。我的应用程序看起来像是在路由转换期间重新加载整个页面，因为标题完全在 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>
    )
}

【问题讨论】：

标签： reactjs react-router lazy-loading nested-routes

【解决方案1】：

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

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>
    )
}

【讨论】：