Next.js嵌套组件从其他页面跳转返回后消失，刷新才显示如何解决？

问题原因 #

你遇到的是第三方DOM操作类插件（Owl Carousel轮播）和Next.js客户端路由不兼容的问题，具体触发逻辑如下：

• 首次打开页面（或手动刷新）时，服务端返回完整静态页面，全局的Owl Carousel初始化代码执行，轮播正常渲染。
• 从其他页面通过客户端路由跳转回首页时，React会重新渲染首页组件，但Owl Carousel的初始化代码仅在首次页面加载时执行过一次，不会重新初始化新的轮播DOM节点，导致轮播区域样式异常，看起来就像组件消失了。

解决方案 #

方案1：在组件内单独管理轮播的初始化/销毁 #

在BannerBaseLine组件中通过useEffect手动控制轮播的生命周期，保证每次组件渲染都会重新初始化轮播：

import { useEffect } from 'react';
import BannerBlock from './BannerBlock';

export default function BannerBaseLine({ categories }) {
  // 新增轮播生命周期管理逻辑
  useEffect(() => {
    // 校验jQuery和轮播实例是否存在
    if (!window.$ || !window.$.fn.owlCarousel) return;

    // 先销毁已存在的轮播实例，避免重复初始化冲突
    const $slider = window.$('.intro-slider');
    if ($slider.data('owl.carousel')) {
      $slider.owlCarousel('destroy');
    }

    // 按你的业务配置重新初始化轮播
    $slider.owlCarousel({
      items: 4,
      loop: true,
      margin: 20,
      nav: false,
      // 其余原有配置保持不变
    });

    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      if (window.$ && $slider.data('owl.carousel')) {
        $slider.owlCarousel('destroy');
      }
    };
  }, [categories]);

  // 原有组件逻辑保持不变
  return (
    <>
      <section
        className="banner-area"
        style={{ backgroundImage: "url(assets/img/banner/0.jpg)" }}
      >
        <div className="container">
          <div className="row">
            <div className="col-lg-6 col-md-8 align-self-center">
              <div className="banner-inner text-md-start text-center">
                <h1>
                  Find the Best <span>Courses</span> & Upgrade{" "}
                  <span>Your Skills.</span>
                </h1>
                <div className="banner-content">
                  <p>
                    Edufie offers professional training classes and special
                    features to help you improve your skills.
                  </p>
                </div>
                <div className="single-input-wrap">
                  <input type="text" placeholder="Search your best courses" />
                  <button>
                    <i className="fa fa-search"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <br></br>
      <br></br>
      <div className="container">
        <div className="intro-area-2">
          <div className="row justify-content-center">
            <div className="col-lg-12">
              <div className="intro-slider owl-carousel">
                {categories?.map((category) => (
                  <BannerBlock category={category} key={category.id} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

方案2：使用React适配版轮播组件（更推荐） #

如果用的是react-owl-carousel这类封装好的React轮播组件，通过next/dynamic禁用服务端渲染即可：

1. 安装依赖（如果未安装）：

npm install react-owl-carousel owl.carousel

2. 改造BannerBaseLine组件：

import dynamic from 'next/dynamic';
import BannerBlock from './BannerBlock';
// 禁用服务端渲染，避免服务端无window对象报错
const OwlCarousel = dynamic(() => import('react-owl-carousel'), {
  ssr: false
});

export default function BannerBaseLine({ categories }) {
  const owlOptions = {
    items: 4,
    loop: true,
    margin: 20,
    nav: false,
    // 其余原有配置保持不变
  };

  return (
    <>
      {/* 原有banner区域代码保持不变 */}
      <div className="container">
        <div className="intro-area-2">
          <div className="row justify-content-center">
            <div className="col-lg-12">
              {/* 替换原来的div为OwlCarousel组件 */}
              <OwlCarousel className="intro-slider" {...owlOptions}>
                {categories?.map((category) => (
                  <BannerBlock category={category} key={category.id} />
                ))}
              </OwlCarousel>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

额外优化 #

给categories加可选链兜底，避免数据为空时报错导致组件渲染失败。

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