Javascript 图像滑块没有'；使用react路由器后无法工作

在我的react应用程序的首页上，我已经具体化了css图像滑块。它工作得很好，直到我使用react router转到另一个组件。当我转到另一个组件并返回主页时，滑块中的图像消失（每个图像都变为灰色），幻灯片无法工作。我每次都得重新加载才能把照片放回幻灯片上。 我该如何解决这个问题

这里是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;

从“React”导入React；
导入“/App.css”；
导入“MaterializeCSS/dist/css/materialize.min.css”；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“/components/Layout/Navbar”导入导航栏；
从“/components/Home/Home”导入主页；
从“/components/SignUp/SignUp”导入注册；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

home.js

import React, { Component } from 'react';

import Slider from './Slider'

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

import React，{Component}来自'React'；
从“./Slider”导入滑块
类Home扩展组件{
状态={}
render（）{
报税表（
);
}
}
导出默认主页；

这是滑块

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;

从“React”导入React；
从“/SliderImage”导入幻灯片图像；
从“物化css”导入M；
常量滑块=（）=>{
document.addEventListener（“DOMContentLoaded”，函数（）{
var elems=document.querySelectorAll（“.slider”）；
M.Slider.init（元素{
指标：假，
身高：600，
过渡期：500，
间隔时间：6000，
});
});
返回(


);
};
导出默认滑块；

这是我试图在两者之间切换的两个不同组件

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

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

RW珠宝

注册

在useEffect挂钩或组件安装中初始化滑块

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;

从“React”导入React；
从“/SliderImage”导入幻灯片图像；
从“物化css”导入M；
常量滑块=（）=>{
useffect（（）=>{
//亚胺化滑块
var elems=document.querySelectorAll（“.slider”）；
var instances=window.M.FormSelect.init（elems{
指标：假，
身高：600，
过渡期：500，
间隔时间：6000，
});
}, []);
返回(


);
};
导出默认滑块；