Transitioning components with React-router Links

[v-ko]

Hi, overdrive has a great concept, thanks for the work you've done!

I'm having a problem with the use cases stated in the title: I'm trying to animate a menu transition and the React-router Links in that menu break the animation with an error stating they need to be in an ancestor of a Router element. I figured the problem comes from the fact that the animation is rendered in a div, that is created as a child of the body element (which is above the Router). It may as well be the case that the renderSubtreeIntoContainer method doesn't give access to the parent elements, because I tried replacing window.document.body.appendChild with window.document.getElementById('App') (the main class in my tests, that is nested in a BrowserRouter). Is this for simplicity's sake or would it complicate things if the start and end animation elements were rendered each as a child of the Overdrive component (in the render function)? They have absolute positions after all. I believe that way the renderSubtreeIntoContainer call wouldn't be needed. I tried implementing the above but quickly found myself over my head with the debugging, I'm quite new to React.

[barbararcbf12]

Hi, overdrive has a great concept, thanks for the work you've done!

I'm having a problem with the use cases stated in the title: I'm trying to animate a menu transition and the React-router Links in that menu break the animation with an error stating they need to be in an ancestor of a Router element. I figured the problem comes from the fact that the animation is rendered in a div, that is created as a child of the body element (which is above the Router). It may as well be the case that the renderSubtreeIntoContainer method doesn't give access to the parent elements, because I tried replacing window.document.body.appendChild with window.document.getElementById('App') (the main class in my tests, that is nested in a BrowserRouter). Is this for simplicity's sake or would it complicate things if the start and end animation elements were rendered each as a child of the Overdrive component (in the render function)? They have absolute positions after all. I believe that way the renderSubtreeIntoContainer call wouldn't be needed. I tried implementing the above but quickly found myself over my head with the debugging, I'm quite new to React.

I am facing tha same issue. When navigating through the routes via Link, I get the following error

Error: Invariant failed: You should not use <Link> outside a <Router>