search

TylerBarnes / gatsby-plugin-transition-link

A link component for page transitions in gatsby
537 stars 70 forks source link

Using AniLink shows immediately next page, before transition has started #175

Closed karamanliev closed 4 years ago

karamanliev commented 4 years ago

Hello, I've tried different methods implementing this, I've also tried 1.16.0, because I'm having the query parameter problem that has been discussed in #129, but pretty much I link to a page using:

<AniLink paintDrip hex="#003F85" to="/game/m1"> Go to Page 4 </AniLink>

And what I get is this: VIDEO. If you look carefully for some reason the next page shows up immediately, before the transition animation has started. I've tried to troubleshoot it, but I can't find a way to make it work properly. Is that a bug, am I missing something or is it something wrong with my code?

I'm also having the query parameter problem. I've downgraded to 1.16.0, but I'm still getting no transitions at all: VIDEO. If I switch up the link to game/m1/p1 instead of game/m1?p=1 it works, although I'm still experiencing the first issue: VIDEO

TylerBarnes commented 4 years ago

🤔 super strange! Can you share your repo so I can debug? That would be really helpful!

karamanliev commented 4 years ago

It's a private client repo that unfortunately I can't share, but I think I've located what's causing the issue and was able to isolate it.

So, I have user authenication that is basically using this. There's a PrivateRoute component which is used in combination with Router, which doesn't let you see stuff if you're not logged in. The issue is caused if the <AniLink> is in a component nested in <PrivateRoute>.

I've created an example repo which is using the simple-auth example. So, there's an <AniLink> in src/pages/index.js which is leading to src/pages/index2.js and vise-versa which is working perfectly. Once you login from app/login with username gatsby and password test there's <AniLink> in src/components/Details.js and src/components/Profile.js. These have the issue.

I think what is causing the problem is not the <PrivateRoute> component but the <Router>{children}</Router> if that makes sense.

karamanliev commented 4 years ago

So, I've found a way to make this work. It's really simple, you need to pass a location prop to your <Router>. Can be checked in this commit

TylerBarnes commented 4 years ago

Glad to hear you resolved this, thanks @karamanliev !