berzniz / berzniz/react-overdrive
Transitioning components with React-router Links
- Dominant language
- JavaScript
- Stars
- 3k
- Forks
- 83
- PR merge metrics
- No merged PRs in 30d
Description
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.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading the Overdrive component's render function and the renderSubtreeIntoContainer call, including where window.document.body.appendChild is used. Compare that with rendering the animation elements as children of the Overdrive component and verify the behavior with the App nested in BrowserRouter. Done means React-router Links remain usable while the menu transition still animates without the Router ancestor error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100