Le nouveau composant est renvoyé mais le composant précédent reste le même dans ReactJs

Un nouveau composant est renvoyé après la connexion, mais le composant de connexion et le composant d'accueil sont affichés sur la page. Je dois renvoyer le composant domestique sans composant de connexion. Je suis nouveau dans React et j'essaie toujours de comprendre les retours et les itinéraires dans React.

Il s'agit du composant mes pages qui renvoie soit Login, soit Home en fonction de this.state.redirect1.

import React, { Component } from 'react';
import './App.css';
import Header from './components/common/Header';
import Footer from './components/common/Footer';
import Pages from './components/common/Pages';

class App extends Component {
  render() {
    return (

      <div className="App container-fluid bg-light w-75">
      <div className="row justify-content-md-center">
        <div className="col m-0 p-0">
          <Header/>
            <div className="">
            <Pages/>
            </div>
          <Footer/>
        </div>
      </div>
    </div>
    );
  }
}

export default App;

Vous trouverez ci-dessous mes composants de connexion, d’accueil et d’application.

import React, { Component } from 'react'
import '../App.css';


export class Home extends Component {

  componentDidMount(){
    console.log("home component mount");
  }



  render() {
    return (
      <div>
        <h1>The page has been routed</h1>
      </div>
    );
  }
}

export default Home

Home.js

Login.js

import React, { Component } from 'react'
import Axios from 'axios';
import Pages from './common/Pages'
import { Redirect } from 'react-router-dom';

class Login extends Component {


    constructor(props) {
        super(props)

        this.state = {
            username: '',
            password: '',
            redirect: false
        }
    }

    handleUsername = (event) => {
        this.setState({
            username: event.target.value
        })
    }

    handlePassword = (event) => {
        this.setState({
            password: event.target.value
        })
    }
    renderRedirect = () => {
        if (this.state.redirect) {
            console.log("from render redirect");
            return <Pages redirect1={this.state.redirect} />
        }
    }


    formSubmitHandler = event => {
        let formdata = new FormData();
        formdata.append("username", this.state.username);
        formdata.append("password", this.state.password);
        Axios.post("/auth/local",{
            "name":this.state.username,
            "password": this.state.password
           })
            .then(res => {
                if (res) {
                    console.log(res);
                    this.setState({ redirect: true });


                }


            })
        event.preventDefault() // used to keep the form data as entered even after the submit
    }

    render() {

        const { username, password } = this.state
        return (

            <div className="p-5">
            { this.renderRedirect() }
                <h3>Sign-In</h3>
                <form onSubmit={this.formSubmitHandler}>
                    <div className="form-group row">
                        <label htmlFor="inputEmail3" className="col-sm-2 col-form-label">Username</label>
                        <div className="col-sm-10">
                            <input type="text" value={username} onChange={this.handleUsername}
                                className="form-control" id="inputEmail3" placeholder="Username" />
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="inputPassword3" className="col-sm-2 col-form-label">Password</label>
                        <div className="col-sm-10">
                            <input type="password" value={password} onChange={this.handlePassword}
                                className="form-control" id="inputPassword3" placeholder="Password" />
                        </div>
                    </div>

                    <div className="form-group row">
                        <div className="col-sm-2">Checkbox</div>
                        <div className="col-sm-10">
                            <div className="form-check">
                                <input className="form-check-input" type="checkbox" id="gridCheck1" />
                                <label className="form-check-label" htmlFor="gridCheck1">
                                    Example checkbox
                                </label>
                            </div>
                        </div>
                    </div>
                    <div className="form-group row">
                        <div className="col-sm-10">
                            <button type="submit" onClick={this.formSubmitHandler} className="btn btn-primary">Sign in</button>
                        </div>
                    </div>
                </form>

            </div>

        )
    }
}

export default Login

App.js p>

    import React, { Component } from 'react';
    import { Redirect } from 'react-router-dom';
    import '../../App.css';
    import Login from '../Login';
    import Home from '../Home';
    import Header from './Header';
    import Footer from './Footer';


    class Pages extends Component {
      constructor(props) {
        super(props)

        this.state = {
          redirect: false,
        }

  }
  handleClick() {
    this.state.redirect = true;
    console.log(this.state.redirect);
  }
  changeRedirect =() =>{
    this.state.redirect = true;
    console.log(this.state.redirect);
    this.forceUpdate()

  }
  renderRedirect = () => {
    if(this.props.redirect1){
      return <Home/>
    }
    else{
      return <Login/>
    }
  }

  render() {

    return (

      <div className="mh-100 PgWidth">
      {this.renderRedirect()}
      </div>
    )
  }
}
export default Pages