Route Transitions with Pose

[MrLoh]

Feature Request

Problem Description

I was trying to setup After.js with Custom Route transitions, using Posed, as described in this article: https://popmotion.io/pose/learn/route-transitions-react-router/

Unfortunately Pose just works properly, if the Switch component can be wrapped directly and is passed a location prop explicitly. Which is not possible by default with After.js

Suggested Solutions

I got it working by forking the implementation of the After component to allow me to wrap the Switch component directly in a transition container (see https://github.com/MrLoh/afterjs-apollo-rnw-styled-pose-example/blob/master/src/AfterWithTransition.js)

This is obviously not a great solution. Maybe it would be possible to pass a Wrapper component to the After component to prevent this issue. Since the After component is only used explicitly on the client, this introduces more complexity though.

I could imagine, that it would be easier, if the interface for customRenderer also explicitly uses the After component and requires also setting the StaticRouter manually. This would also help in setting up content for all routes like a header outside of the router switch, which currently isn't possible on the server.

I'd be happy to come up with a PR, but this should be discussed first, as it deals with the architecture of After.

---

• After.js Version: latest
• Razzle Version: 2.4.0
• React Version: 16.4.2
• OS: macOS 10.13.6
• Node Version: 10.1.0
• Package Manager and Version: yarn 1.6.0
• Demo Repo or Link: https://github.com/MrLoh/afterjs-apollo-rnw-styled-pose-example

[jaredpalmer]

Yes. Just like gatsby 2, lack of a layout component makes this impossible. Let’s fix it

[MrLoh]

Maybe the easiest way would be to pass a layout component to both After and to render (just like document). I think that should work for both: non switch routes and transitions.

[MrLoh]

@jaredpalmer I whipped up a quick PR #173 of how this could work

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[MrLoh]

There’s a PR in flight for this, so it’s not stale.

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[MrLoh]

PR pending

[MiYogurt]

God, to solve the Layout problem and routing animation problem, I need to modify most of the After. JS files.

React is very difficult to insert in After. JS at some level.

I thnik in customRenderer function should pass {route, data} params. let user can self replace After.tsx or After.tsx add some wrap component interface。

[fa7ad]

Hey people, did anybody ever figure out a simple solution to this?

[MrLoh]

yes, switching to next, haven't regretted it for a second

[fa7ad]

That doesn't sound like a solution. Specially with that horrible routing system.