Transitioning components with React-router Links
v-ko opened this issue · 1 comments
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.
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 replacingwindow.document.body.appendChild
withwindow.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>