Flowbite Carousel仅页面重载时显示 路由跳转返回后失效问题

Flowbite 原生JS组件默认是面向静态页面/传统多页应用设计的，初始化逻辑仅在页面全量加载完成时触发一次，未做React单页应用的生命周期适配，这是故障的核心诱因：

• 手动刷新页面时，浏览器会完成全量DOM重载，Flowbite会自动扫描页面中带data-carousel标识的轮播节点，绑定切换事件、注入动态运行时类、启动自动播放逻辑，因此轮播功能表现正常。
• 通过react-router-dom做路由跳转属于单页应用的客户端路由切换，不会触发浏览器全页刷新：离开轮播页面时React会卸载轮播对应的DOM节点，路由返回时轮播节点是重新挂载的全新DOM，但Flowbite的全局初始化逻辑不会二次执行，新挂载的轮播节点没有完成事件绑定、实例初始化，就会出现图片不显示、所有交互功能失效的问题。

• 优先替换为官方React适配版本flowbite-react提供的Carousel组件，该版本完全遵循React组件生命周期设计，组件挂载时自动完成初始化、卸载时自动清理事件监听与实例，天然兼容react-router的路由切换逻辑，不会出现二次进入失效的问题。
• 若必须使用原生Flowbite的JS实现，不要直接复制原生HTML示例代码到项目中，需要在轮播组件内通过useEffect钩子手动接管初始化与销毁逻辑，参考实现如下：

import { useEffect } from 'react';
import { Carousel } from 'flowbite';

export default function CarouselPage() {
  useEffect(() => {
    const carouselRoot = document.getElementById('custom-carousel');
    if (!carouselRoot) return;
    // 挂载完成后手动初始化轮播实例
    const carouselInstance = new Carousel(carouselRoot);
    // 组件卸载时销毁实例，避免内存泄漏
    return () => carouselInstance.destroy();
  }, []);

  return (
    <div id="custom-carousel" data-carousel="slide">
      {/* 此处放轮播的具体内容结构 */}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Joy