Реагировать Suspense с вложенными маршрутами - PullRequest
Новая
       63

Реагировать Suspense с вложенными маршрутами

0 голосов
/ 16 марта 2020

У меня есть мой установочный маршрутизатор реагирующего приложения, как показано ниже. Мое приложение выглядит как перезагрузка всей страницы во время преобразования маршрута, поскольку заголовок находится в пределах 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>
    )
}

1 Ответ

0 голосов
/ 16 марта 2020

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