How do I use this if I am importing the <Layout> component into every 'page'?

[rchrdnsh]

I'm trying to do this in my layout.js component:

<AppLayout>
  <Navigation>
    <Links...n' stuff>
  </Navigation>
  <MainContent>
    <PageTransition>
      {children}
    </PageTransition>
  </MainContent>
</AppLayout>

where I wrap the children of the MainContent component so that they transition while the navigation remains constant, but it does not seem to work.

I don't think I can use this plugin the way that is proscribed, as every page is wrapped in the layout component to avoid re-rendering the navigation every time the inner page changes, or at least, it did not work for me.

So, I guess, is there a different architecture for Gatsby V2 sites where I can have a persistent navigation and transitions for the inner parts of the main view that change?

[PhEEP]

I would also like to know if this is possible and how to implement.

[PhEEP]

@rchrdnsh This example addressed my use case, maybe it can be useful for you? https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions

[mongkuen]

Sorry for the lack of updates, but effectively the set of features I built for v1 is simply not possible with v2.

I should've given the documentation an update and I apologize for causing quite the length of confusion users have had.

I've written a new README that has a detailed description of the issue (It's not simply changing replaceHistory with onRouteUpdate as the v1 > v2 documentation suggests), but the Gatsby team has still provided an example on how you could get page transitions to work and I've described why their approach works the way it does.

I'm leaving this issue open for comment, but hopefully this is helpful. Again, apologies for all the confusion this must've caused.