Reactjs 将 ref 转发到所有页面(路由组件)只是为了将其应用于

并具有跳过导航链接(按钮).有没有更好的办法

由于在每个被路由的组件中都应用了RefMain，因此最好将其抽象为布局布线组件，而不是每个页面内容的包装组件.它不是呈现childrenprops ，而是呈现Outlet组件，以便嵌套路由将其内容呈现到其中.

const RefMain = forwardRef((props, ref) => {
  const [title, setTitle] = React.useState();

  return (
    <Main>
      <BeginningOfMain tabIndex="-1" ref={ref}>
        {title} main content
      </BeginningOfMain>
      <Outlet context={{ setTitle }} />
    </Main>
  );
});

export const RefWrapper = ({ children, title }) => {
  const { setTitle } = useOutletContext();
  React.useEffect(() => {
    setTitle(title);
  }, [title]);

  return children;
};

export default RefMain;

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

当页面位置更新时，可以使用另一个ref和div元素将焦点设置回页面顶部.

const App = () => {
  const topRef = useRef();
  const beginningOfMainRef = useRef(null);

  const location = useLocation();

  useEffect(() => {
    topRef.current.scrollIntoView();
    topRef.current.focus();
  }, [location.pathname]);

  const handleFocusMain = () => beginningOfMainRef.current.focus();

  return (
    <Theme>
      <div ref={topRef} tabIndex={-1} />
      <GlobalStyle />
      <SkipNavigationButton onClick={handleFocusMain}>
        Skip Navigation Links
      </SkipNavigationButton>
      <Header />
      <Routes>
        <Route element={<RefMain ref={beginningOfMainRef} />}>
          <Route path="/" element={<HomePage />} />
          <Route
            path="/distributors"
            element={(
              <RefWrapper title="Distributors">
                <DistributorsPage />
              </RefWrapper>
            )}
          />
          <Route
            path="/contacts"
            element={(
              <RefWrapper title="Contacts">
                <ContactsPage />
              </RefWrapper>
            )}
          />
        </Route>
      </Routes>
      <Footer />
    </Theme>
  );
};

export default App;

我没有站在任何沙箱来测试这一点，但我相信它应该接近您所描述的期望行为.如果有问题，让我知道，我会在现场演示工作.