change the page from Auth to Home after login

I have this web app that, after a successful login, the page should redirect from Auth.js to Home.js, but what it is doing is after a successful login it is just a changing the URL without redirecting to the page I want:

// app.js 
import React, {Component} from 'react';
import './App.css';
import Authen from './Pages/Authen';
import Home from './Pages/Home';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

class App extends Component {

    render() {
        return (
            <div className="App">

                <Router>
                    <div>
                        <ul>
                        </ul>
                        <Route exact path="/" component={Authen}/>
                        <Route path="Home" component={Home}/>
                    </div>
                </Router>

            </div>

        );
    }
}

export default App;

// Auth.js
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom'

var firebase = require('firebase');

class Authen extends React.Component {
    Login = () => {
        //login method
        const email = this.refs.email.value;
        const password = this.refs.password.value;
        console.log(email, password);

        const auth = firebase.auth();

        const promise = auth.signInWithEmailAndPassword(email, password);

        promise.catch(e => {
            var err = e.message;
            console.log(err);
            this.setState({err: err});
        });
        //gets user uid
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                console.log(user.uid);
                this.props.history.push('/Home')
            }
        });
    }

    constructor(props) {
        super(props);

        this.state = {
            err: ''
        };
        this.Login = this.Login.bind(this);
    }

    render() {
        return (
            <div className="login_div">
                <div className="main-div">
                    <h3>N.N.NASSAR</h3>
                    <input ref="email" type="email" placeholder="Email..." id="email_field"/>
                    <input ref="password" type="password" placeholder="Password..." id="password_field"/>
                    <p>{this.state.err}</p>
                    <button onClick={() => this.Login()}> Login</button>
                </div>
            </div>
        );
    }
}

export default withRouter(Authen);

//Home.js
import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                <h1>saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaad</h1>
            </div>
        );
    }
}

export default Home;