React-Bootstrap与Gatsby项目点击导航跳转后页面不回顶如何解决

核心原因 #

• 未使用Gatsby内置的<Link>组件做客户端导航，当前用的原生a标签跳转无法触发Gatsby的默认滚动恢复逻辑
• 未显式禁用Gatsby默认的滚动位置记忆行为，导致浏览器会长期保留历史滚动位置

具体修复步骤 #

步骤1：替换导航组件为Gatsby Link实现客户端路由 #

react-bootstrap的导航组件支持通过as参数指定自定义渲染组件，你只需要引入Gatsby的Link组件替换原生a标签即可，修改后的导航核心代码如下：

// 首先导入Link组件
import { Link } from "gatsby"
import React from "react"
import { StaticQuery, graphql } from "gatsby"
import styles from "./styles/nav.module.css"
import { withPrefix } from "gatsby"
import Container from "react-bootstrap/Container"
import Nav from "react-bootstrap/Nav"
import Navbar from "react-bootstrap/Navbar"
import NavDropdown from "react-bootstrap/NavDropdown"

function Navigation() {
  return (
    <StaticQuery id={styles.container}
      query={graphql`
        query SlugQuery {
          allDataJson {
            nodes {
              slug
            }
          }
        }
      `}
      render={data => (
        <Navbar collapseOnSelect expand="sm" variant="dark" bg="dark" fixed="top" style={{"--bs-bg-opacity": ".9"}}>
          <Container fluid>
            {/* 这里指定as={Link}，href换成to属性 */}
            <Navbar.Brand as={Link} to={withPrefix("/")}>
              <img 
                src={withPrefix("/img/logo.png")} 
                alt="logo" 
                width="87.5px" height="50px">
              </img>
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="me-auto">
                <NavDropdown title="Products" id="collapsible-nav-dropdown">
                  {data.allDataJson.nodes.map(({slug}, i) => {
                      let split = slug.split("/")
                      let listItem = split[2].replace(/-/g, " ")
                      // 下拉项也替换为Link组件
                      return (
                        <NavDropdown.Item as={Link} to={withPrefix(slug)} key={i} className={styles.dropdownItem}>{listItem}</NavDropdown.Item>
                      )
                    })}
                </NavDropdown>
                {/* 所有导航链接都替换为Link组件 */}
                <Nav.Link as={Link} to={withPrefix("/rental")}>Rental</Nav.Link>
                <Nav.Link as={Link} to={withPrefix("/specials")}>Specials</Nav.Link>
                <Nav.Link as={Link} to={withPrefix("/contact")}>Contact</Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      )}
    />
  )
}

export default Navigation;

步骤2：显式配置滚动规则（可选，兜底生效） #

在项目根目录的gatsby-browser.js文件中添加如下配置，强制所有导航跳转后都滚动到页面顶部，完全禁用默认的滚动位置记忆：

exports.shouldUpdateScroll = () => {
  window.scrollTo(0, 0)
  return false
}

步骤3：清理缓存重启服务 #

修改完成后执行以下命令清理Gatsby缓存，避免旧代码缓存导致问题不生效：
gatsby clean && gatsby develop

说明 #

该问题和Bootstrap版本无关，是Gatsby客户端路由的滚动恢复逻辑未正确触发导致，因此切换Bootstrap4/5版本都无法修复问题。

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