title: Maximum update depth exceeded React when I try to click on the same link for the same page with react-router-dom
body: <p>I have a header component like this :</p>
  
  <pre><code>import React from "react"
  import ProfilPicture from '../css/img/PROFILPICTURE.jpg';
  import TravelmemoriesText from '../components/TravelmemoriesText/index';
  import { Dropdown } from 'react-bootstrap'
  import Searchbar from "./Searchbar";
  import { Redirect } from 'react-router-dom'
  import Config from '../Config'
  import './styles.css'
  
  
  class HomeHeader extends React.Component{
    constructor(props) {
      super()
  
      this.state = {
        fromChild: "",
        redirection: '',
        userName: '',
        userFirstName: ''
      }
  
      this.getDataFromSearchBar = this.getDataFromSearchBar.bind(this);
      this.goToFriends = this.getDataFromSearchBar.bind(this);
      this.goToProfile = this.goToProfile.bind(this);
      this.disconnect = this.disconnect.bind(this);
      this.goToHome = this.goToHome.bind(this);
    }
  
    goToProfile(){
      this.setState({
        redirection: &lt;Redirect exact from="/" to={{
          pathname: '/profile',
          state: { thisUser: true }
      }} /&gt;
      })
    }
  
    goToFriends(){
      this.setState({
        redirection: &lt;Redirect to='/friends' /&gt;
      })
    }
  
    goToHome(){
      this.setState({
        redirection: &lt;Redirect to='/' /&gt;
      })
    }
  
    disconnect(){
  
      fetch('http://localhost:3001/disconnect', {
          method: 'POST',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': localStorage.getItem('xsrfToken')
          }
        })
        .then( () =&gt; {
          localStorage.removeItem('xsrfToken')
          this.setState({
            redirection: &lt;Redirect to='/connexion' /&gt;
          })
        })  
    }
  
    getDataFromSearchBar(data, alpha3){
      this.props.openModal(data, alpha3)
    }
  
    componentDidMount(){
      fetch(Config.apiUrl + 'thisuser', {
        method: 'GET',
        credentials: 'include',
        headers: {
          "Authorization": localStorage.getItem("xsrfToken")
        }
      })
      .then(response =&gt; response.json())
      .then(body =&gt; {
        this.setState({
          userFirstName: body.firstName,
          userName: body.name
        })
      })
      .catch(err =&gt; {
        console.log("Erreur de chargement de l'API")
      })   
    }
  
    render(){
      return(
        &lt;div className="navBar"&gt;
        {this.state.redirection}
        &lt;div className="navHeader"
          onClick={this.goToHome}&gt;
          &lt;TravelmemoriesText /&gt;
        &lt;/div&gt;
        &lt;div className="navBody"&gt;
          &lt;div className="searchPadding"&gt;
          &lt;Searchbar openModal={this.getDataFromSearchBar} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="navFooter"&gt;
          &lt;Dropdown&gt;
            &lt;Dropdown.Toggle&gt;
            &lt;div className="profilName"&gt;
              {this.state.userFirstName} {this.state.userName}
            &lt;/div&gt;
            &lt;img src={ProfilPicture} className="profilPicture" /&gt;
            &lt;/Dropdown.Toggle&gt;
  
            &lt;Dropdown.Menu&gt;
              &lt;Dropdown.Header&gt;
                &lt;img src={ProfilPicture} className="dropdownPicture" /&gt;
                &lt;div className="dropdownProfilName text-center"&gt;
                {this.state.userFirstName} {this.state.userName}
                &lt;/div&gt;
                &lt;div className="dropdownProfilStatus text-center"&gt;
                  Globe Trotteur
                &lt;/div&gt;
               &lt;/Dropdown.Header&gt;
              &lt;Dropdown.Item
                onClick={this.goToProfile}
              &gt;Profil&lt;/Dropdown.Item&gt;
              &lt;Dropdown.Divider /&gt;
              &lt;Dropdown.Item
                onClick={this.goToFriends}
              &gt;Amis&lt;/Dropdown.Item&gt;
              &lt;Dropdown.Divider /&gt;
              &lt;Dropdown.Item
                onClick={this.disconnect}
              &gt;Se déconnecter&lt;/Dropdown.Item&gt;
            &lt;/Dropdown.Menu&gt;
          &lt;/Dropdown&gt;
        &lt;/div&gt;
        &lt;/div&gt;             
      )
    }
  }
  
  export default HomeHeader;
  </code></pre>
  
  <p>Then I have a Profile component where goes the redirection when click on link "Profil" :</p>
  
  <pre><code>import React, { Component } from "react"
  import Header from '../Header'
  import ModalCountry from '../ModalCountry'
  import './styles.css'
  
  class Profile extends Component {
      constructor(props){
          super(props)
  
          this._child = React.createRef();
  
          this.state = {
              modalTitle: '',
              alpha3: '',
              thisUser: this.props.location.state ? this.props.location.state.thisUser : ""
          }
  
          this.getDataFromSearchBar = this.getDataFromSearchBar.bind(this);
      }
  
      componentDidMount(){
          console.log(this.state.thisUser)
      }
  
      getDataFromSearchBar(data, alpha3){
          this.setState({
            modalTitle: data,
            alpha3: alpha3
          }, () =&gt; {
            this._child.current.open()
          })
      }
  
      render() {
          return (
              &lt;div className="wrapperStyles"&gt;
                  &lt;Header openModal={this.getDataFromSearchBar} /&gt;
                  &lt;ModalCountry ref={this._child} modalTitle={this.state.modalTitle} alpha3={this.state.alpha3} /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Profile
  </code></pre>
  
  <p>My routes are managed like this in index.js :</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './css/index.css';
  import {
      BrowserRouter as Router,
      Route,
      Switch,
      withRouter
  } from 'react-router-dom'
  import App from './App';
  import Connexion from './screens/Connexion/index.js';
  import * as serviceWorker from './serviceWorker';
  import Test from './Test';
  import Profile from './screens/Profile/Profile.js';
  import Security from './Security';
  
  const Root = () =&gt; {
      return (
          &lt;Router&gt;
              &lt;Switch&gt;
                  &lt;Route exact path='/' component={Security(App)} /&gt;
                  &lt;Route exact path='/connexion' component={Connexion} /&gt;
                  &lt;Route exact path='/test' component={Test} /&gt;
                  &lt;Route exact path='/profile' component={Profile} /&gt;
              &lt;/Switch&gt;
          &lt;/Router&gt;
      )
  }
  
  ReactDOM.render(&lt;Root /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>If I click many times on the link "Profil" in the header, when I am on the profile page, I got an error from react :</p>
  
  <p><a href="https://i.stack.imgur.com/zyDnQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zyDnQ.jpg" alt="enter image description here"></a></p>
  
  <p>My functions are bind correctly, I also tried with {() => function()} to call my functions inside components. Is it because of Redirect component from react-router-dom?</p>
  
  <p>Edit: Here is Searchbar component which was missing :</p>
  
  <pre><code>import React from 'react';
  import { components } from 'react-select';
  import Select from 'react-select'
  import Config from '../Config';
  import './styles.css'
  
  const { Option } = components;
  
  const IconOption = (props) =&gt; 
    (
      &lt;Option {... props}&gt;
        &lt;div&gt;
          &lt;img className="img-searchbox" src={props.data.alpha2 == "CS" ? process.env.PUBLIC_URL + "/img/flags_mini/" + props.data.alpha2 + ".png" : props.data.icon} /&gt;
          {props.data.label}
        &lt;/div&gt;
      &lt;/Option&gt;
    );
  
  const customStyle = {      
    control: () =&gt; ({
      borderBottom: '1 !important',
      borderRight: '0 !important',
      borderLeft: '0 !important',
      borderTop: '0 !important',
  
      // This line disable the blue border
      boxShadow: '0 !important',
    }),
  
    menu: (provided) =&gt; ({
      ...provided,
      backgroundColor: "rgba(244, 241, 236, 0.5)"
    })
  }
  
  class Searchbar extends React.Component {
    constructor(props){
      super(props)
  
      this.state = {
        selectedOption: null,
        options: []
      }
    }
  
    handleChange = selectedOption =&gt; {
      if(selectedOption.type == "country"){
        this.props.openModal(selectedOption.label, selectedOption.alpha3)
      }
    };
  
    componentDidMount(){
      let arr = [];
  
      fetch(Config.apiUrl + 'country', {
        method: 'GET',
        credentials: 'include',
        headers: {
          "Authorization": localStorage.getItem("xsrfToken")
        }
      })
      .then(response =&gt; response.json())
      .then(body =&gt; {
          body.forEach(function(country){
            arr.push({ value: country.name_fr, label: country.name_fr, type: "country", alpha3: country.alpha3, alpha2: country.alpha2, icon: 'https://www.countryflags.io/' + country.alpha2.toLowerCase() + '/shiny/32.png'})
          })
      })
      .then(() =&gt; {
        fetch(Config.apiUrl + 'users_info', {
          method: 'GET',
          credentials: 'include',
          headers: {
            "Authorization": localStorage.getItem("xsrfToken")
          }
        })
        .then(response =&gt; response.json())
        .then(body =&gt; {
            body.forEach(function(user){
              arr.push({ value: user.firstName, label: user.firstName + ' ' + user.name, type: "user" })
            })
        })
        .then(() =&gt; {
          this.setState({
            options: arr
          })
        })
        .catch(err =&gt; {
          console.log("Erreur de chargement de l'API")
        })
      })
      .catch(err =&gt; {
        console.log("Erreur de chargement de l'API")
      })
    }
  
    render() {
      return (
        &lt;Select
          classNamePrefix="react-select"
          placeholder={"Search..."}
          onChange={this.handleChange}
          components={{ DropdownIndicator: () =&gt; null, Option: IconOption }}
          options={this.state.options}
          openMenuOnClick={false}
          styles={customStyle}
          getOptionLabel={(option)=&gt;option.label}
          getOptionValue={(option)=&gt;option.value}
        /&gt;
      );
    }
  }
  
  export default Searchbar;
  </code></pre>