Javascript 事件侦听器无法再次添加的问题，一旦React卸载它们

我对react非常陌生，我决定使用CreateReact应用程序建立一个网站以获得体验。我在代码中导入了一个库组件，这给我带来了一些问题。它基本上是一个带有过滤和洗牌选项的图片库，每当你完全重新加载页面时，它都可以正常工作，但一旦你在网页内部的路由之间切换（使用react router），它就会停止工作

我的猜测是，一旦react卸载了EventListener，它们就不会被添加到我的按钮中，我真的不确定如何重构手头的代码，以便让它继续运行。我试过用钩子，但没法用

如何重构

componentDidMount () {
    document.addEventListener('DOMContentLoaded', () => {
      window.demo = new Demo(document.getElementById('grid'));
    });
  }

部分代码，以便在不重新加载整个页面的情况下使其工作

Homebase.js

import React, { Component } from 'react';
import './Homebase.scss';
import Shuffle from 'shufflejs';
import { Link } from 'react-router-dom';
import Demo from './Homebasescript.js';

class homebase extends Component {

  componentDidMount () {
    document.addEventListener('DOMContentLoaded', () => {
      window.demo = new Demo(document.getElementById('grid'));
    });
  }

  render() {
    return (

      <section>
      <div className="homebase-page">

      <div className="container-about">
        <div className="row-about">
          <div className="homebase-title-container">
            <h1 className="homebase-about-title">Townhall <span style={{color: 'rgb(21, 115, 209)'}}>12</span> Base Designs</h1>

            <div className="switch-container-th12">
              <button className="switch-buttons-th12 switch-to-th9-12">
                <div className="switch-buttons-text-12">coming soon</div>
              </button>
              <button to="/Townhall-10" className="switch-buttons-th12 switch-to-th10-12">
                <div className="switch-buttons-text-12">Townhall 10</div>
              </button>
              <button to="/Townhall-11" className="switch-buttons-th12 switch-to-th11-12">
                <div className="switch-buttons-text-12">Townhall 11</div>
              </button>
              <button to="/Townhall-12" className="switch-buttons-th12 switch-to-th12-12">
                <div className="switch-buttons-text-12">Townhall 12</div>
              </button>
            </div>

          </div>
        </div>
      </div>

      <div className="container-about">
        <div className="row-about">
          <div className="col-4@sm col-3@md">
            <div className="filters-group filters-group-left">
              <label htmlFor="filters-search-input" className="filter-label filter-color">Search</label>
              <input className="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" />
            </div>
          </div>
        </div>

        <div className="row-about">
          <div className="col-12@sm filters-group-wrap">
            <div className="filters-group filters-group-right">
              <p className="filter-label filter-color">Filter</p>
              <div className="btn-group filter-options">
                <button className="btn btn--primary" data-group="war">War</button>
                <button className="btn btn--primary" data-group="trophy">Trophy</button>
                <button className="btn btn--primary" data-group="farm">Farm</button>
                <button className="btn btn--primary" data-group="fun">Fun</button>
                <button className="btn btn--primary" data-group="contributors">Contributors</button>
              </div>
            </div>
            <fieldset className="filters-group">
              <legend className="filter-label filter-color">Sort</legend>
              <div className="btn-group sort-options">
                <label className="btn active">
                  <input type="radio" name="sort-value" value="dom" defaultChecked /> Default </label>
                <label className="btn">
                  <input type="radio" name="sort-value" value="title" /> Title </label>
                <label className="btn">
                  <input type="radio" name="sort-value" value="date-created" /> Date Created </label>
              </div>
            </fieldset>
          </div>
        </div>
      </div>

      </div>
      </section>

    );
  };
};

export default homebase;

---

我将非常感谢任何帮助，因为我已经在这方面坚持了好几天了

正如@charlietfl所说，

DOMContentLoaded

已经在初始页面加载时发生，并且当您在SPA中的路线之间导航时不会再次触发

尝试删除侦听器：

componentDidMount () {
    //document.addEventListener('DOMContentLoaded', () => {
    //  window.demo = new Demo(document.getElementById('grid'));
    //});

    window.demo = new Demo(document.getElementById('grid'));
}

---

DOMContentLoaded

在任何react组件装载之前发生。您完全正确！我想我可以通过将它放在

componentDidMount

函数中反复调用它，但我错了。非常感谢。哦，哇，真是太棒了！它现在可以正常工作了，不用再刷新页面了！起初，我认为在

componentDidMount

内部包装

DOMContentLoaded

会再次调用它。但你绝对正确，它只会被调用一次！我不得不承认，我很困惑，但我会继续研究，以充分理解它！非常感谢你的帮助！

componentDidMount () {
    //document.addEventListener('DOMContentLoaded', () => {
    //  window.demo = new Demo(document.getElementById('grid'));
    //});

    window.demo = new Demo(document.getElementById('grid'));
}