image slider doesn't work after using react router

Question

On the front page of my react app I have Materialize css image slider. It works well until I move on to another component using react router. When I go to another component and go back to the home page the images in the slider are gone (every image turns gray), the slide does not work. I have to reload every time to get the pictures back on the slide. How do I fix this?

here is app.js

import React from "react";
import "./App.css";
import "materialize-css/dist/css/materialize.min.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import Navbar from "./components/Layout/Navbar";
import Home from "./components/Home/Home";
import SignUp from "./components/SignUp/SignUp";

const App = () => {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/signup" component={SignUp} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

home.js

import React, { Component } from 'react';

import Slider from './Slider'

class Home extends Component {
    state = {  }
    render() { 
        return ( 
            <Slider />
         );
    }
}
 
export default Home;

Here is the slider

import React from "react";
import SliderImage from "./SliderImage";
import M from "materialize-css";

const Slider = () => {
  document.addEventListener("DOMContentLoaded", function () {
    var elems = document.querySelectorAll(".slider");
    M.Slider.init(elems, {
      indicators: false,
      height: 600,
      transition: 500,
      interval: 6000,
    });
  });

  return (
    <div class="slider test">
      <ul class="slides">
        <SliderImage
          image={
            "https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-2.jpg"
          }
          title={"Jewellery"}
          description={"Find your perfect jewellery piece to mark your special moment."}
          classPosition={"caption center-align"}
        />
        <SliderImage
          image={
            "https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-5.jpg"
          }
          title={"Rings that bind time"}
          description={"Here's our small slogan."}
          classPosition={"caption left-align"}
        />
        <SliderImage
          image={
            "https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-3.jpg"
          }
          title={"Clasped with class"}
          description={"Stylish bracelets that put you in a class of your own."}
          classPosition={"caption right-align"}
        />
        <SliderImage
          image={
            "https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-6.jpg"
          }
          title={"Hanging art"}
          description={"Pendants that are modern art or spiritual symbols, includes a range of Dhammachackras and Crosses."}
          classPosition={"caption center-align"}
        />
      </ul>
    </div>
  );
};

export default Slider;

These are the two different components that I am trying to switch between

<Link to="/">
      <li class="brand-logo">RW Jewellery</li>
</Link>

<li>
     <Link to="/signup">Sign up</Link>
</li>

Answer 1

Initialize the slider in useEffect hook or in component did mount

import React from "react";
import SliderImage from "./SliderImage";
import M from "materialize-css";

const Slider = () => {
  useEffect(() => {
    // imitialize slider
    var elems = document.querySelectorAll(".slider");
    var instances = window.M.FormSelect.init(elems, {
      indicators: false,
      height: 600,
      transition: 500,
      interval: 6000,
    });
  }, []);

  return (
    <div class="slider test">
      <ul class="slides">
        <SliderImage
          image={
            "https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-2.jpg"
          }
          title={"Jewellery"}
          description={
            "Find your perfect jewellery piece to mark your special moment."
          }
          classPosition={"caption center-align"}
        />
        <SliderImage
          image={
            "https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-5.jpg"
          }
          title={"Rings that bind time"}
          description={"Here's our small slogan."}
          classPosition={"caption left-align"}
        />
        <SliderImage
          image={
            "https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-3.jpg"
          }
          title={"Clasped with class"}
          description={"Stylish bracelets that put you in a class of your own."}
          classPosition={"caption right-align"}
        />
        <SliderImage
          image={
            "https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-6.jpg"
          }
          title={"Hanging art"}
          description={
            "Pendants that are modern art or spiritual symbols, includes a range of Dhammachackras and Crosses."
          }
          classPosition={"caption center-align"}
        />
      </ul>
    </div>
  );
};

export default Slider;