Next.js中Footer组件usePathname作用及移除后异常问题咨询

问题背景 #

我是Next.js新手，接手一个未完成的付费开发项目，发现Footer组件仅在首页显示，其他页面不显示。排查后确认是因为Footer组件使用了客户端专属的usePathname钩子，且组件位于App目录中。移除以下两行代码后，Footer能在所有页面正常显示，但首页的一组带链接的图片组件却消失了，无法理解其中原因，寻求解答。

要移除的代码片段：

const pathname = usePathname();
if (pathname !== "/") return null;

完整Footer组件代码：

"use client";
import React from "react";
import { usePathname } from "next/navigation";
const Footer = () => {
  const pathname = usePathname();

  if (pathname !== "/") return null;

  return (
    <footer className="py-[66px] bg-black min-h-[326px] flex">
      <div className="flex md:flex-row md:gap-0 gap-20 flex-col justify-between flex-1 max-w-screen-1440px mx-auto lg:pl-[106px] lg:pr-[270px] md:px-16 sm:px-12 px-4">
        <div className="flex flex-col justify-between">
          <img src="/footer.gif" alt="" />
          <p className="textwhite text-sm">© 2010 — 2020</p>
        </div>
        <div className="flex-1 flex md:justify-end lg:gap-20 md:gap-12 gap-10">
          <div className="flex flex-col gap-6">
            <h5 className="text-sm text-white font-bold">Navigate</h5>
            <div className="flex flex-col gap-4">
              <span className="text-white text-sm">Buildings</span>
              <span className="text-white text-sm">Neighborhoods</span>
              <span className="text-white text-sm">Articles</span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;

原因分析 #

核心是布局冲突：

1. 原代码中Footer仅在首页渲染，其他页面不渲染，首页布局未为常驻Footer预留底部空间；
2. 移除判断后Footer在所有页面渲染，其黑色背景、固定高度的样式直接覆盖了首页底部的图片组件；
3. 若Footer使用position: fixed/absolute定位（脱离文档流），会进一步加剧内容遮挡问题。

解决方法 #

• 调整Footer定位与层级：检查Footer的CSS样式，若存在position: fixed可改为position: relative，或降低z-index值，避免覆盖其他内容；
• 为首页内容添加底部间距：给首页主内容容器设置padding-bottom，值大于等于Footer总高度（当前Footer最小高度326px+上下内边距66px，总高度至少458px），确保底部图片不被遮挡；
• 拆分组件（可选）：若需求是首页Footer有特殊内容，其他页面样式不同，可抽离通用Footer为服务端组件，首页专属内容单独作为客户端组件，通过usePathname控制显示，避免全量渲染导致的布局问题。

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