Skip to content

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

Open
#99
Open
The parent component gets reloaded when navigating between child/nested components#59
#99
Labels
bugSomething isn't working

Description

@ghost
ghost
opened on Mar 14, 2021

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

Activity

  1. vroh17 commented on Jul 23, 2021

    @vroh17
    vroh17
    on Jul 23, 2021

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

  2. joshpensky commented on Sep 14, 2021

    @joshpensky
    joshpensky
    on Sep 14, 2021
    Contributor

    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

  3. joshpensky
    added
    bugSomething isn't working
    on Sep 14, 2021

  4. vtrphan commented on Jul 20, 2022

    @vtrphan
    vtrphan
    on Jul 20, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions