Question

我正在Gatsby上建立一个网站，我希望能够根据我所在的页面有条件地呈现组件。例如，在页脚中有一个我不希望它出现在“我们的内容”页面上的组件，但对于网站的其余部分却是这样。

我尝试执行此操作，此操作奏效了，但是在运行build之后，出现一条错误消息： "window" is not available during server side rendering.

{ window.location.pathname !== '/ourcontent'
  ? <MyComponent />
  : null
}

我正在使用功能组件。

我将如何实现这一目标？任何帮助将不胜感激！非常感谢您！

Answer 1

在任何盖茨比页面组件上，您都应该拥有一个location属性。然后，您可以使用props.location.pathname获取路径名。可以肯定的是，这也可以在服务器端渲染（您的构建）上使用。

Answer 2

最简单，最简单（最干净）的方法是使用Gatsby提供的内置props。如您在their documentation中所见，它公开了location prop，其中包含所有需要的信息。当然，由于它不是全局浏览器对象，例如window或document，因此它将在服务器端渲染期间以及运行时可用。

您可以简单地：

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

const Component = ({ location, data }) => {
  return location.pathname !== 'ourcontent' ? <MyComponent /> : null
}
export default Component

您可以通过使用location.pathname !== 'ourcontent' && <MyComponent />除去三元条件来改善它，不需要返回null。

Answer 3

您也可以使用@reach/router。这是一个非常简单的示例。

import { Location } from '@reach/router'


const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <Location>
      {({ location }) => {
        console.log(location)
        if (location === '/') return <p>You are on the homepage {location.pathname}</p>
        return <h1> you are not on the homepage </h1>
      }}
    </Location>
  </Layout>
)

export default IndexPage

此codesandbox同时显示了@reach/router和location.pathname的实现。

如何根据特定页面有条件地在Gatsby中渲染组件？

3 个答案: