Components don't appear to render when using the package
Closed this issue · 7 comments
I want to use it but can't understand how. So please if someone help me. I have a running site on react with react router, now I want to add some page transition from your library.
Did you check out this demo
https://github.com/Steveeeie/react-page-transition/blob/master/src/demo/index.js
?
is not rendering my components neither, not sure whats wrong, seems an easy setup
Hi @munibkhalid & @Al3busse
Thanks for taking the time to raise your issue, I'm sorry it has taken a while to respond.
I decided to try and use the package again using nothing but the code provided in the README. I can see now where people are having issues. (You can see a working CodeSandbox here: https://codesandbox.io/s/basic-react-page-transition-demo-rk0uv)
There are two primary issues:
1. The README contains an error
The README says you should set up the routes using a to prop like this:
<Route to="/home" component={Home} />
<Route to="/about" component={About} />It should actually say to use the path prop like this:
<Route path="/home" component={Home} />
<Route path="/about" component={About} />2. The PageTransition component has a height style of 100% so it will not display unless all surrounding containers have some kind of height. To get started you could try and apply the following css rules:
body,
html,
#root {
height: 100vh;
}I'm glad you found a solid alternative. I hope this helps anyone else who has the same problems. The package isn't as plug and play as I would like it to be and will definitely look to improve upon it in a future update.
Steve
Closing this issue as I have updated the README.md with this information and have provided better CodeSandbox examples.