如何显示特定页面组的特定标题。盖茨比

Posted 2023-04-14

【中文标题】如何显示特定页面组的特定标题。盖茨比

【英文标题】：How can I display a specific header for a specific group of pages. Gatsby

【发布时间】：2021-08-31 07:01:13

【问题描述】：

在我的 Gatsby 网站上，我有一个用于大多数页面的主标题，以及一个用于特定页面的 SpecialHeader。

在我的Layout 文件中，包含页眉、子页面、页脚等，我添加了以下条件：

        location.pathname === ('/special-page/' || '/special-page') ? (
          <SpecialHeader currentPathname=location.pathname />
        ) : (
          <MainHeader currentPathname=location.pathname />
        )

我只想为包含路径/special-page 的页面显示SpecialHeader。有没有更好的方法来做到这一点？

会有额外的子页面 (/special-page/foo) 需要相同的标题。如果只存在/special-page 路径，是否可以显示特殊标题？例如/special-page*

我希望我说得通。提前感谢您的任何建议。

【参考方案1】：

假设您使用的是react-router-dom 可选路径参数有一个功能：

可选参数

<Route path="/to/page/:pathParam?" component=MyPage />

多个可选参数

<Route path="/to/page/:pathParam1?/:pathParam2?" component=MyPage />

【讨论】：

查看这个答案***.com/questions/35604617/…

【参考方案2】：

我通过删除正斜杠并获取路径中的第一个单词找到了解决方案。如果路径名称匹配，我应该正确的标题。

例如：

const stripPath = location.pathname.split('/')[1];
const isSpecialPath = stripPath === 'special-page' ? true : false;

isSpecialPath ? (
  <SpecialHeader currentPathname=location.pathname />
  ) : (
  <MainHeader currentPathname=location.pathname />
)