Javascript 导航到布局组件中的#id

我正在使用Gatbsy，我正在尝试为用户（使用屏幕阅读器）创建一个可访问性链接，以便能够导航到内容（跳过导航）

“我的布局”组件（用于网站的每个页面）的外观如下所示：

const Layout = ({ children }) => {

{/* hidden for brevity */} 

return (

 <>
   <a href="#main-content">Skip to content</a> {/* <-reference line */}

   {/* hidden for brevity */} 

   <main id="main-content">
      {children}
   </main>


   {/* hidden for brevity */}

 </>

);

}

常量布局=（{children}）=>{
{/*为简洁起见隐藏*/}
返回(
{/*如上所述，盖茨比的
组件从
@reach/router
（从React）扩展而来，不允许导航到任何参数。从：

无论是
还是
导航
都不能用于带有
哈希或查询参数。如果需要此行为，则应
使用锚定标签或导入Gatsby提供的
@reach/router
包
已依赖于利用其导航功能

如果使用
导航
，例如，
导航（“/blog#main content”）
它将重定向到
/blog
，忽略该参数，因为它是不允许的

在您的情况下，
useRef
方法不会直接使用，因为在您创建它的那一刻，它还没有被渲染。因此，您可以将
useRef
钩子方法与
useffect
钩子一起使用，以确保加载DOM树或使用一些手动触发器：

const Layout = ({ children }) => {
  const mainRef= useRef(null);


  const navigateToContent= () => {
    mainRef.current.scrollIntoView(); //manual trigger 
  }

 useEffect(()=>{
    mainRef.current.scrollIntoView();  //automatic trigger 
 }, [])
 
{/* hidden for brevity */} 

return (

 <>
   <div onClick={navigateToContent}>Skip to content</div> 

   {/* hidden for brevity */} 

   <main id="main-content" ref={mainRef}>
      {children}
   </main>


   {/* hidden for brevity */}

 </>

);

}

const布局=（{children}）=>{
const mainRef=useRef（null）；
const navigateToContent=（）=>{
mainRef.current.scrollIntoView（）；//手动触发器
}
useffect（（）=>{
mainRef.current.scrollIntoView（）；//自动触发
}, [])
{/*为简洁起见隐藏*/}
返回(
跳转到内容
{/*为简洁起见隐藏*/}
{儿童}
{/*为简洁起见隐藏*/}
);
}

在上面的代码片段中，我添加了两种不同的方法，选择一种适合您需求的方法。关键部分是正确设置
main
标记的引用，最初设置为
null
，以避免路由更改时出现再水化问题

手动触发时，只需在
中调用函数（
navigateToContent
）跳到内容
元素，该元素使用内置函数滚动到引用

自动触发器使用了相同的思想，但一旦加载DOM树，就会触发该函数（
useffect
with empty
deps
，
[]
）


该问题已解决如下：

实际将此
跳到内容
更改为此
跳到内容
（卸下
/
）效果非常好

请像这样使用跳转到content@George
@reach/router
不允许使用这种导航…我可以确认这并不能解决问题（它将始终链接到主页上的主要内容）嘿，实际上将此
跳到内容
更改为此
跳到内容
（删除“/”）很好用。你在一个构建的项目中试过吗？我现在会试一下。是的，一切似乎都很好。很好，这很奇怪，因为
@reach/router
本机不允许这种导航。你应该安装一些插件来使用锚导航。无论如何，我已经更新了答案，添加了你的解决方法f或者每个需要它的人。