Question

是否可以在Gatsby网站上找到用户所在页面的路径并将其存储在const中，以便可以在用户当前路径旁边对其进行检查？换句话说，如果它们位于/about页面上，并且正在单击链接以导航至/contact页面，则需要获取两者的路径，以便可以彼此进行检查。我知道我可以获得当前网址的location.pathname，但是单击链接后如何找到他们导航到的路径？

Answer 1

由于您的代码结构不清楚。假设有一个简单的锚标签，您可以执行以下操作：-

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

在您的getHref方法中

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

检查这种方法是否适合您的情况。

请原谅任何错字，我尚未验证。

Answer 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属性，但是您遇到了很多问题。检查一下，找出哪一个符合您的要求。

获取盖茨比的目标路径

2 个答案: