Question

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

用嵌套路线反应挂起

1 个答案: