[BUG]Routing not working

[maaajo]

Hi!

I'm trying to introduce animation routing to my small quiz game. Everything is working correctly with animations being applied to different routes until application should hit specific route after that the whole routing breaks and is not working.

I cant recreate that with CodeSandbox from my specific example but I will try do explain with code examples:

Here is my app component:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initialScreen: true,
      areaSelectionScreen: false,
      gameScreen: false,
      gameOption: '',
      area: '',
      language: 'en'
    };

    this.handleGameOptionClick = this.handleGameOptionClick.bind(this);
    this.handleAreaSelectionClick = this.handleAreaSelectionClick.bind(this);
    this.restartApp = this.restartApp.bind(this);
    this.handleLanguageChange = this.handleLanguageChange.bind(this);
  }

  handleAreaSelectionClick(e) {
    this.setState({
      area: e.target.dataset.area,
      areaSelectionScreen: false,
      gameScreen: true
    });
  }

  handleGameOptionClick(e) {
    this.setState({
      gameOption: e.target.dataset.gameOption,
      initialScreen: false,
      areaSelectionScreen: true
    });
  }

  restartApp() {
    this.setState({
      gameOption: '',
      area: '',
      areaSelectionScreen: false,
      initialScreen: true,
      gameScreen: false
    });
  }

  handleLanguageChange(e) {
    this.setState({
      language: e.target.dataset.language
    });
  }

  render() {
    return (
      <StyledMain className="App">
        <Header
          handleLanguageChange={this.handleLanguageChange}
          language={this.state.language}
        />
        <AnimatePresence exitBeforeEnter>
          <Switch
            location={this.props.location}
            key={this.props.location.pathname}
          >
            <Route
              exact
              path="/"
              render={props => <InitialScreen {...props} />}
            />
            <Route
              exact
              path="/:gameType"
              render={props => <GameOptions {...props} />}
            />
            <Route
              exact
              path="/:gameType/:gameArea"
              render={props => (
                <Game {...props} language={this.state.language} />
              )}
            />
          </Switch>
        </AnimatePresence>
        <Footer />
      </StyledMain>
    );
  }
}

export default withRouter(App);

The routing works perfectly until second route. When the third route is clicked and it should be rendered, nothing happens and routing stops working - page refresh is required.

When key prop is removed from switch, routing works as expected but then the exit animations are not being applied,

Appreciate your help,

[maaajo]

Closing - forgot to add exit animation in GameOptions.