The parent component gets reloaded when navigating between child/nested components

[shreyansh-zazz]

Summary

I am using nested GuardProvider one for public URLs and another one is for dashboard pages. Whenever I do navigation inside dashboard routes the parent also gets refreshed i.e. my dashboard layout with side nav also gets reloaded (not actual reload but I see the loader provided in the parent GuardProvider). I have a component DashboardLayout inside that only I am using GaurdProvider to show the content or say nested routes.

Relevant information

// public routes
<GuardProvider loader={abcLoader}>
    <GuardedRoute path="/signin" component={signin}>    </GuardedRoute>
    <GuardedRoute path="/dashboard" component={dashboard}>    </GuardedRoute>
</GuardProvider>

// dashboard component

// layout
    // header
    // side navigation
    // content
        <GuardProvider loader={xyzLoader}>
            <GuardedRoute path="/" component={home}>    </GuardedRoute>
            <GuardedRoute path="/analytics" component={analytics}>    </GuardedRoute>
        </GuardProvider>

in the above-given example when I am doing navigation from / i.e. home component to /analytics i.e. analytics component I see the abcLoader first and then the xtzLoader.

Is this known behaviour? or a bug? I wasn't sure so I put it in question.

Note

I am wrapping the parent GuardProvider inside ErrorBoundary and Suspense with the same abcLoader because I am using lazy load of components with React.lazy

[vroh17]

I have similar issue with components rerendering. Any thoughts how to fix it?

[joshpensky]

This is most definitely a bug! 🐞 Some details on what's happening behind the scenes:

• The parent <GuardedRoute path="/dashboard"> component is detecting a change in the location which causes the parent guard to retrigger and show the abcLoader
• The child <GuardedRoute path="/analytics"> component also detects the location change, which causes the child guard to retrigger and show the xyzLoader
• This is why you first see the parent loader, and then the child loader.

I'll do some exploration to figure out the best way to resolve this issue, but open to any PRs as well!

Just a heads up that better nested route support is expected in React Router v6 and we will be investigating compatibility and improvements after the latest version is finalized for release as well

[vtrphan]

@joshpensky is this library still maintained? With React 18 it does not really work well...