react-lazyload with react-router-dom

[zaaakher]

Greetings,

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 and lazyloading isn't working properly. I initially tried it without react-router-dom and it worked just fine. So I'm fairly sure the problem is with the routing.

./App.js

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 (
    <Router>
      <Switch>
        <Route path="/gallery" render={() => <Gallery />} />
        <Route path="/" render={() => <Home />} />
      </Switch>
    </Router>
  );
}
export default App;

./Gallery.js

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 () => {
  let creds = await Auth.currentCredentials(); 
  console.log(creds.identityId);
};
getCreds();

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: []
    };
  }
  async componentDidMount() {
    await Storage.list("")
      .then(res => {
        res.shift(); //remove the first element of the array
        res.map(imgObject => {
          let lnk =
            "LINK IM FETCHING FROM" + imgObject.key;
          this.setState(prevState => ({
            images: [...prevState.images, lnk]
          }));

          return imgObject;
        });
      })
      .catch(err => console.log(err));
  }

  render() {
    const items = this.state.images.map(imgLink => (
      <LazyLoad height={200} key={Math.random()}>
        <img width={1080} src={imgLink} alt="img" />
      </LazyLoad>
    ));
    return <div className="App">{items}</div>;
  }
}

export default App;

Lazyloading works as intended when I remove <Router> and <Switch> with the same code as ./Gallery.js

[chenop]

@zaaakher have you figure this out?
I think I got the same problem