React实现跳过导航链接：如何避免全局传递ref的繁琐操作？

方案：用React Context封装跳过导航逻辑 #

这种方式可以彻底消除重复传递ref的冗余代码，把聚焦逻辑全局共享，页面组件无需额外处理ref传递。

1. 创建跳过导航Context #

新建一个单独文件（比如SkipNavigationContext.js），封装ref和聚焦方法：

import { createContext, useContext, useRef, useCallback } from 'react';

// 创建Context，默认值为空函数避免报错
const SkipNavigationContext = createContext({
  focusMainContent: () => {},
  mainContentRef: null
});

// 提供Provider组件，管理ref和聚焦逻辑
export const SkipNavigationProvider = ({ children }) => {
  const mainContentRef = useRef(null);

  // 用useCallback缓存函数，避免不必要的重渲染
  const focusMainContent = useCallback(() => {
    if (mainContentRef.current) {
      mainContentRef.current.focus();
      // 可选：聚焦后平滑滚动到元素位置
      mainContentRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, []);

  return (
    <SkipNavigationContext.Provider 
      value={{ focusMainContent, mainContentRef }}
    >
      {children}
    </SkipNavigationContext.Provider>
  );
};

// 自定义Hook，简化Context消费
export const useSkipNavigation = () => useContext(SkipNavigationContext);

2. 修改App组件 #

移除所有路由的ref传递，改用Context提供的聚焦方法，并用Provider包裹路由区域：

import { useSkipNavigation } from './SkipNavigationContext';

const App = () => {
  const { focusMainContent } = useSkipNavigation();

  return (
    <Theme>
      <GlobalStyle />
      <SkipNavigationButton onClick={focusMainContent}>
        Skip Navigation Links
      </SkipNavigationButton>
      <Header />
      {/* 用Provider包裹路由，让所有页面组件能访问Context */}
      <SkipNavigationProvider>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/distributors" element={<DistributorsPage />} />
          <Route path="/contacts" element={<ContactsPage />} />
        </Routes>
      </SkipNavigationProvider>
      <Footer />
    </Theme>
  );
};
export default App;

3. 简化RefMain组件 #

直接从Context获取ref，无需再用forwardRef：

import { useSkipNavigation } from './SkipNavigationContext';

const RefMain = ({ children, title }) => {
  const { mainContentRef } = useSkipNavigation();

  return (
    <Main>
      <BeginningOfMain 
        tabIndex="-1" 
        ref={mainContentRef}
        aria-label="Main content start" // 增强无障碍性
      >
        {title} main content
      </BeginningOfMain>
      {children}
    </Main>
  );
};

export default RefMain;

4. 简化页面组件 #

页面组件不再需要forwardRef，直接使用RefMain即可：

const AboutPage = () => {
  return (
    <RefMain title="About">
      <h1>hi, i'm about</h1>
    </RefMain>
  );
};
export default AboutPage;

方案优势 #

• 完全DRY：无需在每个路由和页面组件中重复传递ref，所有逻辑集中在Context里
• 低侵入性：页面组件不需要关心无障碍逻辑的实现细节，只需正常使用RefMain
• 可扩展性：后续如果需要添加其他无障碍相关功能，直接在Context中扩展即可

额外无障碍提示 #

• 保留BeginningOfMain的tabIndex="-1"，这是让不可聚焦元素能被JS触发聚焦的关键
• 添加aria-label或aria-describedby，让屏幕阅读器用户明确聚焦位置的含义
• 用屏幕阅读器（如NVDA、VoiceOver）测试跳转逻辑，确保功能正常

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