如何阻止Gatsby中Layout组件在页面切换时重复渲染？

问题原因 #

你目前在每个页面组件中手动导入并包裹Layout，每次路由切换时，页面组件会重新挂载，导致Layout也跟着重新渲染，触发标题和图标的动画重复播放。

解决方案 #

利用Gatsby提供的wrapPageElement API，在全局层面统一包裹Layout，让它只在应用初始化时渲染一次，后续路由切换仅更新页面内容部分。

步骤1：创建/修改全局包裹文件 #

在项目根目录下创建或编辑gatsby-browser.js和gatsby-ssr.js文件（两个文件内容一致，保证服务端渲染和客户端行为统一）：

import React from "react"
import Layout from "./src/components/Layout"

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

步骤2：移除页面中的Layout包裹 #

修改所有页面组件，不再手动导入和包裹Layout：

Index Page 修改后

import React from "react";
import "/styles/styles.css";

function App () {
  return (
    <div id="introduction">
      <h3>Hello World</h3>
    </div>
  );
};

export default App;

About Me Page 修改后

import React from "react";

function About() {
    return (
      <h1>About Me</h1>
    )
};

export default About;

步骤3：处理Navbar的路由激活状态（可选） #

如果需要Navbar根据当前路由高亮激活项，使用Gatsby的useLocation钩子监听路由变化，无需依赖Layout重新渲染：

import React from "react";
import { Link, useLocation } from "gatsby";

function Navbar() {
  const location = useLocation();

  return (
    <nav id="navbar" >
      <Link 
        to="/" 
        className={`tabs ${location.pathname === "/" ? "active" : ""}`}
      >Home</Link>
      <Link 
        to="/about" 
        className={`tabs ${location.pathname === "/about" ? "active" : ""}`}
      >About Me</Link>
      <Link 
        to="/projects" 
        className={`tabs ${location.pathname === "/projects" ? "active" : ""}`}
      >Projects</Link>
      <Link 
        to="/contactme" 
        className={`tabs ${location.pathname === "/contactme" ? "active" : ""}`}
      >Contact Me</Link>
    </nav>
  )
}

export default Navbar;

效果说明 #

完成上述修改后，Layout组件只会在应用启动时渲染一次，切换导航链接时，仅页面内容（children部分）会更新，标题和图标的动画不会重复触发。

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