More flexibility to control the DelayedTransition's key

[cloudratha]

Having a way for the key to be overridden would allow us to control if certain nested links need transitioning.

For example I have a route /search/, but because of the nature of SPA and reach router, i need the query term to be apart of the pathname, e.g. /search/some+search+query/ (querystring updates dont trigger route renders). This forces an entire remount of the search page, which is undesirable.

Perhaps if there was a plugin option to attach wildcards to certain routes, ie. /search/*, and if that matches the pathname, it uses the wildcard as the key instead. This way The transitiongroup wont think it needs to mount a new instance.

Ideas?

[cloudratha]

I tried a fork and tested out my approach and it seems to work quite well. Reach Router's pick utility method helps match a pathname to a list of routes.

Although I'm not sure my use case warrants this change? It would be great to disable transitions for specific routes, especially for client-only routes.

[TylerBarnes]

@cloudratha can you link your fork?

Thanks!

[cloudratha]

My fork was more of a butchered proof of concept.

https://github.com/cloudratha/gatsby-plugin-transition-link

This enables a poorly named plugin option called matchPaths which accepts an array of routes.

Then we check the incoming route to see if it matches any of the matchPaths using @reach/router's pick method.

https://github.com/cloudratha/gatsby-plugin-transition-link/blob/0292b13c17e930cb33e25b5d832fc066dd7e598a/src/components/TransitionHandler.js#L42-L56

Like I said initially, I'm not 100% sure this is the right approach, but feels like it could be sustainable if desired?

[TylerBarnes]

So I'm also not sure what the best approach here would be, but as much as possible I want to keep URL's out of the plugin config. The spirit of transition-link is for the settings to be on the link. Ideally if the page shouldn't remount but we're still navigating, there should be a prop on the transition-link component. That might even be simpler than matching wildcard paths. Maybe it could be something like <TransitionLink updatePageKey={false}>...? Not entirely sure 🤔

[TylerBarnes]

Or maybe we could even have your matchPaths option as a prop on transition-link?

[cloudratha]

I like the idea of being able to set the key as a prop. But it also should be honoured if triggered programmatically. It would probably be a good idea to write an example of how to trigger navigating (as I couldn't quite figure out how to pass through all the required fields to the trigger method) , and how to set the key too.

[TylerBarnes]

I think a React hook should be written for programatically navigating. Something like useTriggerTransition which would return a function you can call to navigate. I believe triggerTransition requires some context so that would wrap it up nicely.