Closed karamanliev closed 4 years ago
🤔 super strange! Can you share your repo so I can debug? That would be really helpful!
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.
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
Glad to hear you resolved this, thanks @karamanliev !
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 ofgame/m1?p=1
it works, although I'm still experiencing the first issue: VIDEO