React SPA（单页应用）中重置键盘Tab焦点位置的问题

问题根因 #

你尝试的两种方案无效的核心原因：

• document.activeElement.blur()仅会将当前聚焦元素失焦，焦点默认落回文档对象，不会重置键盘导航的起始位置
• document.body默认不属于可聚焦元素，未配置tabindex属性时直接调用focus()方法不会生效

实现方案 #

这是单页应用组件/路由切换时焦点管理的标准无障碍实现方案，步骤如下：

1. 给页面主内容容器（或需要聚焦的页面起始位置元素）添加tabindex="-1"属性，该属性可让元素被JS主动聚焦，且不会插入正常的键盘Tab导航序列，不会影响原有交互逻辑

// React组件示例
<main id="page-main-content" tabIndex="-1">
  {/* 切换后渲染的页面内容 */}
</main>

注意React中要使用驼峰写法tabIndex，不能写原生的tabindex。

2. 在组件切换完成的生命周期中主动触发聚焦，React函数组件可通过useEffect监听切换触发条件：

import { useEffect } from 'react'
// 如果使用react-router，可直接监听路由路径变化
import { useLocation } from 'react-router-dom'

function App() {
  const { pathname } = useLocation()

  useEffect(() => {
    const targetElement = document.getElementById('page-main-content')
    if (targetElement) {
      targetElement.focus()
      // 可搭配添加滚动到页面顶部的逻辑
      // window.scrollTo(0, 0)
    }
  }, [pathname]) // 依赖项替换为你实际的组件切换触发变量即可

  // 其余业务逻辑
}

如果不需要适配屏幕阅读器，仅需要简单重置焦点到页面起始，也可以直接给<body>标签添加tabindex="-1"属性后调用document.body.focus()，效果一致。

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