Redirect Login React

I want to implement redirect in my react project login. I googled it, and all use router. I've tried to add it to my code but I totally failed. This is my code, how can I implement router in the correct way?

App.js

import React, {useState, useEffect} from 'react';
import { Switch, Route, Redirect, Router } from 'react-router-dom'; 
import fire from './fire';
import Login from './Login';
import Home from './Home';
import './App.css';

function App() { 
  const [user, setUser] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [emailError, setEmailError] = useState('');
  const [passwordError, setPasswordError] = useState('');
  const [hasAccount,setHasAccount] = useState(false); //login e logout

  const inputCleaner = () =>{
    setEmail("");
    setPassword("");
  };

  const clearErrors = () =>{
    setEmailError("");
    setPasswordError("");
  };

  const handleLogin = () =>{
    clearErrors();
    fire
      .auth()
      .signInWithEmailAndPassword(email,password)
      .catch(err=>{
        switch(err.code){
          case "auth/invalid-email":
          case "auth/user-disabled":
          case "auth/user-not-found":
            setEmailError(err.message);
            break;
          case "auth/wrong-password":
            setPasswordError(err.message);
            break;
        }
      });
  };

  const handleSignup = () =>{
    clearErrors();
    fire
      .auth()
      .createUserWithEmailAndPassword(email,password)
      .catch(err=>{
        switch(err.code){
          case "auth/email-already-in-use":
          case "auth/invalid-email":
            setEmailError(err.message);
            break;
          case "auth/weak-password":
            setPasswordError(err.message);
            break;
        }
      });
  };

  const handleLogout = () =>{
    fire.auth().signOut();
  };

  const authListerner = () =>{
    fire.auth().onAuthStateChanged(user => {
      if(user){
        inputCleaner();
        setUser(user);
      }else{
        setUser("");
      }
    })
  };

  useEffect (() =>{
    authListerner();
  },[]);

  return (

      <Router>
    <div className="App">
      {user ? (    
        <Home handleLogout={handleLogout} />
      ):(
       <Login 
          email={email}
          setEmail={setEmail}
          password={password}
          setPassword={setPassword}
          handleLogin={handleLogin}
          handleSignup={handleSignup}
          hasAccount={hasAccount}
          setHasAccount={setHasAccount}
          emailError={emailError}
          passwordError={passwordError}
        />
      )}
      
    </div>
    </Router>
    
  );
  
}

export default App;

Login.js

import React from 'react'

const Login = (props) =>{
    const{
        email,
        setEmail,
        password,
        setPassword,
        handleLogin,
        handleSignup,
        hasAccount,
        setHasAccount,
        emailError,
        passwordError
    } = props;

    return(
        <section className="login">
            <div className="loginContainer">
                <label>Email</label>
                <input 
                    type="text" 
                    autoFocus
                    required 
                    value ={email}
                    onChange ={e => setEmail(e.target.value)} 
                />
                <p className="errorMsg">{emailError}</p>
                <label>Password</label>
                <input 
                    type="password" 
                    autoFocus
                    required 
                    value ={password}
                    onChange ={e => setPassword(e.target.value)} 
                />
                <p className="errorMsg">{passwordError}</p>
                <div className="btnContainer">
                    {hasAccount ? (
                        <>
                        <button onClick={handleLogin}>Accedi</button>
                        <p>Don't have an account?<span onClick={ () => setHasAccount(!hasAccount)}>Sign up</span></p>
                        </>
                    ) : (
                        <>
                        <button onClick={handleSignup}>Sign up</button>
                        <p>Have an account?<span onClick={ () => setHasAccount(!hasAccount)} >Sign in</span></p>
                        </>
                    )}
                </div>
            </div>
        </section>
    )
};
export default Login;

Home.js

import React from 'react';

const Home = ({handleLogout}) =>{

    return(
        <section className="home">
            <nav>
            <h2>Benvenuti</h2>
            <button onClick={handleLogout}>Esci</button>
            </nav>    
        </section>    
    );

};
export default Home;

I need to redirect to home after login, because I have to hidden the private information about users. To autenticate, it runs firebase, and I've written the functions in another component named fire.js, but to my mind isn't relevant to solve this problem.