使用反应路由器后图像滑块不起作用

Question

在我的 React 应用程序的首页上，我有 Materialize css 图像滑块。在我使用 React 路由器转到另一个组件之前，它运行良好。当我转到另一个组件并返回主页时，滑块中的图像消失了（每个图像都变成灰色），幻灯片不起作用。我每次都必须重新加载才能将图片放回幻灯片上。我该如何解决这个问题？

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

这是滑块

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;

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

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

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

Answer 1

在useEffect hook或组件中初始化slider 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;

使用反应路由器后图像滑块不起作用

image slider doesn't work after using react router

javascript

materialize

reactjs