[ReactJs] Redirection

Bonjour,

Ce que je fais

J'ai une page de connexion ./SignIn/SignIn.js qui appelé par ./App.js, et dont Apps.js est appelé dans ./index.js.
J'ai une page Welcome/Welcome.js qui est accessible lorsqu'on clique sur le bonton connexion de la page SignIn.

J'ai mis la redirection dans l'élément handleSubmit du fichier SignIn.js

./index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

//import Firebase, { FirebaseContext } from './Firebase';

ReactDOM.render(
  //<FirebaseContext.Provider value={new Firebase()}>
      <React.StrictMode>
       <App /> 
    </React.StrictMode>
  //</FirebaseContext.Provider>,
  document.getElementById('root')
);
serviceWorker.unregister();

./Apps.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

import SignIn from './SignIn/SignIn';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        {
        <SignIn />       
        }
      </header>     
    </div>
  );
}
export default App;

./SignIn/SignIn.js

import * as React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

import {useState, useContext} from 'react'
//import { FirebaseContext } from '../Firebase'

// import { useHistory } from 'react-router-dom'
import { createHashHistory } from 'history'
// import { useHistory } from "react-router";

// CSS ----------------------------------------------------------------------------------------
const useStyles = makeStyles((theme) => ({

  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

// Fonction SignIn ---------------------------------------------------------------------------
export default function SignIn() {
  const classes = useStyles();

  // const history = useHistory();
  const history = createHashHistory()

  //const firebase = useContext(FirebaseContext);

  // Variables ----------------------------------------------------------------------------
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // Message d'erreur ---------------------------------------------------------------------
  const [error, setError] = useState('');

  // Gestion de l'envoie du formulaire ----------------------------------------------------
  const handleSubmit = e => {
   e.preventDefault()
   //firebase.loginUser(email, password)
   .then(user => {
     setEmail('');
     setPassword('');
     history.push('/welcome');
   })
   .catch(error => {
     setError(error)
    setEmail('');
    setPassword('');
   })

  }

  return (

    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Entrez vos identifiants
        </Typography>

        <form className={classes.form} noValidate onSubmit={handleSubmit}>

          {/* Champs  email ------------------------------------------------------------------------ */}
          <TextField

            onChange={ e => setEmail(e.target.value) }
            value={email}

            variant="outlined"
            margin="normal"
            required
            fullWidth
            // id="email"
            label="Email"
            name="email"
            autoComplete="off"
            autoFocus
          />

          {/* Champs password ---------------------------------------------------------------------- */}
          <TextField

            onChange={ e => setPassword(e.target.value) }
            value={password}

            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            // id="password"
            autoComplete="off"
          />

          {/* Bouton Connexion ---------------------------------------------------------------------- */}
          <Button
            type="submit"
            fullWidth
            variant="contained"
            className={classes.submit}
          >
            Connexion
          </Button>
        </form>

        {error !== '' && <span> {error.message} </span>}

      </div>
    </Container>
  );
}

./Welcome/Welcome.js

import React from 'react'

const Welcome = () => {

    return(
        <div>
               <h1> Welcome <h1>
        </div>
    )
}

Ce que je veux

Je voudrais que lorsqu'on clique sur connexion on soit redirigé (si les identifiants sont correctes) vers la page Welcome.