The demo and code => https://codesandbox.io/s/73ymn2k911
Based on my observations through dev tools, it initially knows where to place components but forgets to set opacity: 1
or remove the old components
I suspect the issue lies in app.js See update below.
import React, { Component } from "react";
import { Route, matchPath } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import AnimatedSwitch from "./animated_switch";
import { firstChild } from "../utils/helpers";
import TopBar from "./top_bar";
import Home from "./home";
import Projects from "./projects";
import ProjectItem from "./project_item";
import Missed from "./missed";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
projects: []
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => {
return response.json();
})
.then(json => {
this.setState({
projects: json.slice(0, 7)
});
});
}
render() {
return (
<div className="wrapper">
<TopBar />
<Route
render={({ location }) => (
<TransitionGroup component="main">
<AnimatedSwitch
key={location.pathname}
location={location}
>
<Route exact path="/" component={Home} />
<Route
exact
path="/projects"
render={props => (
<Projects {...props} projects={this.state.projects} />
)}
/>
<Route
path="/projects/:id"
render={props => (
<ProjectItem {...props} projects={this.state.projects} />
)}
/>
<Route component={Missed} />
</AnimatedSwitch>
</TransitionGroup>
)}
/>
</div>
);
}
}
But I could be wrong. Upon clicking a nav link on codesandbox.io, it prints two errors to its console that aren't reported by chrome dev tools on my live test site:
Warning: Unknown event handler property `onExited`. It will be ignored.
Warning: Received `true` for a non-boolean attribute `in`.
This is all based on an example I found for older dependencies, posted to a blog last year. I'm trying to learn from example and it's difficult to get your head around something that changes every 6 months.
If you can help, thank you!
Update: I've been reviewing the react-transition-group v1 to v2 migration guide and I think the problem is actually my transition components which I have no idea how to fix.