Estou estudando `ReactJS` e estou tendo um problema com as rotas. Eu consegui implementar a rota, porém quando clico para abrir uma página, ele permanece renderizando a página que estava aberta antes e só depois de apertar <kbd>F5</kbd> é que atualiza para a página nova. Estou usando `react-router-dom`.
Meu arquivo `Routes.js`:

    import React, {Component} from 'react';
    import {Route, Switch} from 'react-router-dom';

    import Event from './Event/Event';

    export class Routes extends Component {
        render() {
            return (
                <main className="container">
                    <BrowserRouter>
                        <Switch>
                            <Route path="/" exact={true} component={App} />
                            <Route path="/event" component={Event} />
                        </Switch>
                    </BrowserRouter>
                </main>
            )
        }
    };

    export default Routes;

Meu arquivo `Home.js` que tem o trecho que chama a próxima página, `Event.js`:

    import React, { Component } from 'react';
    import { Link } from 'react-router-dom';

    import '../App.css';
    import axios from 'axios';

    const config = {
        headers: {}, 
      };
    class Home extends Component {
        state = {
            events: []
          }
        componentDidMount() {
            axios.get('https://web-services.yeapps.com.br/api/events', config)
            .then(res => {
                const events = res.data.data.events;
                this.setState({ events });
                console.log(events);
                
            })
        }
        render() {
            
    		return (
                <div className="container-fluid">
                    { this.state.events.map((event, i) => 
                        <div className="card" key={i}>
                            <img className="card-img-top" src={ event.banner_app } alt="{event.name}" />
                            <div className="card-body">
                                <div className="row">
                                    <div className="col-8 no-padding-left">
                                        <h4 className="card-title">{event.name}</h4>
                                        <p className="card-date">{event.date}</p>
                                        <p className="card-place">{event.place}</p>
                                    </div>
                                    <div className="col-4 align-self-center justify-content-end">
                                        <Link className="btn btn-primary" to="/event">Comprar</Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
    		)
    	}

    }

    export default Home;

Meu `App.js`:

    import React, { Component } from 'react';
    import { BrowserRouter } from 'react-router-dom';
    import './App.css';
    import SideBar from './components/Sidebar/Sidebar'
    import Header from './components/Header/Header'
    import Home from './Home/Home';
    import Event from './Event/Event';

    class App extends Component {
        render() {
            return (
                <BrowserRouter>
                    <div id="App">
                        <SideBar />
                        <Header Title="Home" />
                        <div id="page-wrap">
                            <Home />
                            <Event /> 
                        </div>
                    </div>
                </BrowserRouter>
            );
        }
    }

    export default App;