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

Question

I have my react application Setup Router as it looks like the code below. My application looks like reloading the entire page during the route transformation because the header is well within the Suspense, the portion has been replaced with ' Fallback ' and then replaced with original content.

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

Inside the settings page, I have another subroutes

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

score 1 · Accepted Answer · answered Mar 16 '20 at 06:25

React.Lazy is always rendered within the React.Suspense Component, it is okay to put another Suspense warp around your nested routes, and code should be

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

Thanks for this, this saved me from a complex workaround – Code Maniac May 18 '23 at 12:30 — Code Maniac, May 18 '23 at 12:30

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

1 Answers1