title: lazyloading images while using react-router-dom
body: <p>I'm using react-router-dom and I'm trying to have lazyloading in my "gallery" page but when I visit the gallery page all the images are loaded and lazyloading isn't working properly. I initially tried it without react-router-dom and it worked just fine. So I have a feeling that the problem is with the routing.</p>
  
  <p><code>./App.js</code></p>
  
  <pre><code>import React from "react";
  import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
  import Gallery from "./Gallery";
  import Home from "./Home";
  
  function App() {
    return (
      &lt;Router&gt;
        &lt;Switch&gt;
          &lt;Route path="/gallery" render={() =&gt; &lt;Gallery /&gt;} /&gt;
          &lt;Route path="/" render={() =&gt; &lt;Home /&gt;} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  }
  export default App;
  </code></pre>
  
  <p><code>./Gallery.js</code></p>
  
  <pre><code>import React from "react";
  import "./App.css";
  
  import Amplify, { Auth, Storage } from "aws-amplify";
  import config from "./aws-exports";
  import LazyLoad from "react-lazyload";
  
  Amplify.configure(config);
  const getCreds = async () =&gt; {
    let creds = await Auth.currentCredentials(); 
  };
  getCreds();
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        images: []
      };
    }
    async componentDidMount() {
      await Storage.list("")
        .then(res =&gt; {
          res.shift(); //remove the first element of the array
          res.map(imgObject =&gt; {
            let lnk =
              "LINK IM FETCHING FROM" + imgObject.key;
            this.setState(prevState =&gt; ({
              images: [...prevState.images, lnk]
            }));
  
            return imgObject;
          });
        })
        .catch(err =&gt; console.log(err));
    }
  
    render() {
      const items = this.state.images.map(imgLink =&gt; (
        &lt;LazyLoad height={200} key={Math.random()}&gt;
          &lt;img width={1080} src={imgLink} alt="img" /&gt;
        &lt;/LazyLoad&gt;
      ));
      return &lt;div className="App"&gt;{items}&lt;/div&gt;;
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Lazyloading works as intended when I remove <code>&lt;Router&gt;</code> and <code>&lt;Switch&gt;</code> with the same code as <code>./Gallery.js</code></p>