在 Gatsby 中获取目标路径答案

【问题标题】：Get Target Path in Gatsby [duplicate]在 Gatsby 中获取目标路径
【发布时间】：2020-10-27 00:41:06
【问题描述】：

有没有办法在 Gatsby 网站上找到用户所在页面的路径并将其存储在 const 中，以便可以在用户当前所在路径旁边检查它？换句话说，如果他们在/about 页面上，并且正在单击链接导航到/contact 页面，我需要获取两者的路径，以便我可以相互检查它们。我知道我可以获取当前网址的location.pathname，但是我如何找到他们在点击链接时导航到的路径？

【问题讨论】：

您是否使用任何库作为路线？如果不是，在链接上使用 click 事件处理程序有什么危害？
我没有使用任何特殊的东西，不。我只需要能够检查与当前路径相比的目标路径。

标签： javascript reactjs react-router gatsby

【解决方案1】：

由于您的代码结构不清楚。假设一个简单的锚标签，你可以这样做：-

<a href="/new/link" onClick={getHref}>New Link</a>

在你的 getHref 方法中

 function getHref(event){
  console.log(event.target.href); // should log '/new/link'
}

检查这是否适用于您的情况。

请原谅任何错字，我还没有验证它。

【讨论】：

【解决方案2】：

Gatsby 默认在顶级组件（这意味着页面）上公开 props（因为它从 React 的 @reach/router 扩展而来）。您可以根据需要将其传递给子组件，也可以将其存储在 const 或 React 的状态中。

在不了解任何页面结构的情况下，我将提供一些虚拟的示例：

import React from "react"
import { graphql } from "gatsby"

const YourPage = ({ location, data }) => {
  console.log('your page is ', location.pathname)
  return <div>Dummy content</div>
}

export default Page

export const query = graphql`
  query PageQuery {
    site {
      siteMetadata {
        siteURL
      }
    }
  }
`

您的信息存储在props.location 下，这就是为什么您可以在组件的声明中对其进行解构。

在上面的例子中，我使用了pathname 属性，但是你暴露了一堆。检查一下，看看哪一个符合您的要求。

【讨论】：