javascript - 根据页面向header添加react组件

Question

在我网站上除两个页面之外的所有页面上，我希望标题包含两个按钮。我怎样才能让标题意识到这一点，以便它在需要时包含按钮，而其他两个页面则不包含按钮。我正在使用 React 和 Gatsby 。

我可以通过向我的组件添加 if 语句来实现此目的吗？如果是这样，我不知道如何超越这一步。

  const isHomepage = pathname == `/`
  const isContact = pathname == `/contact/`
  let styles = {}
  if (isHomepage) {

    }
  } else if (isContact) {



     } else {
  }

这是我的标题代码:

import React from 'react'
import Link from 'gatsby-link'
import colors from '../utils/colors'

const Header = ({ siteTitle }) => (
  <div
    style={{
      background: colors.white,
      marginBottom: '1.45rem',
      borderBottom: '1px solid',
      borderBottomColor: colors.green,
      height: '3rem',
      top: 0,
      left: 0,
      width: '100%',
      position: 'fixed',
    }}
  >
    <div
      style={{
        paddingLeft: 20,
        paddingRight: 20,
        marginLeft: 'auto',
        marginRight: 'auto',
        maxWidth: 960,
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          height: 53,
        }}>
        <h3 style={{
          margin: 0,
        }}>
        <Link
          to="/"
          style={{
            color: colors.green,
            textDecoration: 'none',
            fontWeight: 450,
          }}
        >
          {siteTitle}
        </Link>
      </h3>
        </div>
    </div>
  </div>
)

export default Header

Answer 1

使用基于location.pathname的条件渲染

{['/path1', '/path2'].indexOf(location.pathname) === -1 && (
   <button>1<button>
   <button>2<button>
)}

import React from 'react'
import Link from 'gatsby-link'
import colors from '../utils/colors'

const Header = ({ siteTitle }) => (
  <div
    style={{
      background: colors.white,
      marginBottom: '1.45rem',
      borderBottom: '1px solid',
      borderBottomColor: colors.green,
      height: '3rem',
      top: 0,
      left: 0,
      width: '100%',
      position: 'fixed',
    }}
  >
    <div
      style={{
        paddingLeft: 20,
        paddingRight: 20,
        marginLeft: 'auto',
        marginRight: 'auto',
        maxWidth: 960,
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          height: 53,
        }}>
        <h3 style={{
          margin: 0,
        }}>
        <Link
          to="/"
          style={{
            color: colors.green,
            textDecoration: 'none',
            fontWeight: 450,
          }}
        >
          {siteTitle}
        </Link>
        {['/path1', '/path2'].indexOf(location.pathname) === -1 && (
          <button>1<button>
          <button>2<button>
        )}
      </h3>
        </div>
    </div>
  </div>
)

export default Header