How to use with react-router v4?

[ebhoren]

Hi, I'm having a hard time trying to figure out how to use this library with react-router (v4). Any tips or examples to show? Thanks

[cheapsteak]

edit: TransitionSwitch and TransitionRoute are currently WIP, please don't use it yet!

ebhoren's solution of directly using matchPath is currently the only known way of making this work with RR4

---

Hey thanks for reaching out!

The <Switch> and <Route> components get in the way of the animation lifecycle calls, so we'd need to extend them

Here's an example: https://codesandbox.io/s/KZp2AnrPG

You'd need to use the extended <TransitionSwitch /> and <TransitionRoute />

<TransitionSwitch /> is just react-router's <Switch /> with a <TransitionGroup /> wrapped around the contents of render(), and <TransitionRoute /> is react-router's <Route /> but passes down animation lifecycle hooks and adds a ref to the child component so the animation lifecycle hooks on <TransitionRoute/> call the animation lifecycle hooks in the child component

This should work, but I am very open to better implementation suggestions

[cheapsteak]

Closing for now, let me know if it works (or doesn't)!

[ebhoren]

@cheapsteak I'm pretty sure it will works. In the meantime, i've managed to use react-router in a way in didn't break your plugin. I'm gonna use it in another project pretty soon.

Thanks for the help.

[cheapsteak]

Would love to see how you did it if you can share :D

[ebhoren]

I'm just completely removed the and from my App render. I'm using react-router matchPath to render the correct child view.

The biggest problem was coming from react-router withRouter and react-redux connect wrappers. These wrappers are the worst when trying to get reference to your child component.