react-router-dom中使用Outlet时skipnav功能失效如何解决？

核心问题 #

默认锚点跳转仅实现页面滚动，未将焦点设置到主内容区域；加上Outlet动态渲染内容后，Tab键焦点仍会从页面顶部的导航栏开始遍历，而非主内容区域。

具体实现步骤 #

1. 为主内容容器添加可聚焦属性
   给包含Outlet的容器添加tabindex="-1"，使其能接收焦点但不会被Tab键默认选中；同时用useRef获取容器引用，方便后续操作。

2. 处理跳转链接的点击事件
   阻止默认锚点跳转行为，手动实现页面滚动并将焦点设置到主内容容器。

3. 添加焦点样式（无障碍要求）
   为主内容容器设置聚焦时的视觉样式，让用户能清晰感知焦点位置。

代码示例 #

import { useRef } from 'react';
import { Outlet } from 'react-router-dom';

function AppLayout() {
  const mainContentRef = useRef(null);

  const handleSkipToMain = (e) => {
    e.preventDefault();
    const mainContent = mainContentRef.current;
    if (mainContent) {
      // 平滑滚动到主内容区域
      mainContent.scrollIntoView({ behavior: 'smooth' });
      // 将焦点设置到主内容容器
      mainContent.focus();
    }
  };

  return (
    <>
      <a href="#maincontent" onClick={handleSkipToMain}>跳转到主内容</a>
      
      {/* 主导航栏 */}
      <nav>
        {/* 导航链接内容 */}
      </nav>

      <div 
        id="maincontent" 
        tabIndex="-1" 
        ref={mainContentRef}
        className="main-content"
      >
        <Outlet />
      </div>
    </>
  );
}

CSS样式（可选但推荐） #

.main-content:focus {
  outline: 2px solid #0066cc;
  outline-offset: 4px;
  /* 若不需要默认outline，也可设置outline: none，但需确保有其他清晰的视觉提示 */
}

额外说明 #

• 路由切换（Outlet内容更新）后，再次点击跳转链接依然有效，因为mainContentRef始终指向主内容容器。
• tabindex="-1"的元素仅能通过focus()方法手动聚焦，不会干扰正常的Tab遍历流程；聚焦后按Tab键，会直接跳到主内容区域内的第一个可聚焦元素（如按钮、输入框、链接等），而非回到导航栏。

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