Javascript 如何使用@reach router根据页面路径设置不同的标题颜色

我有一个带有页眉组件的布局，其中我的所有页面都作为子页面呈现，因此我在添加特定样式到页眉时遇到了一些问题，这取决于许多页面

因此，主页有一个透明的背景，其他页面可以有填充颜色或相同的透明颜色

  handleHeaderClass() {
    const currentPath = /other-page\/[0-9]+/i;

    if (pathname.match(currentPath)) {
      this.setState({ isTransparent: false });
    }
    //...
  }

我一直在通过添加一个函数来添加这个类，使路径名与location prop中的当前路径相匹配，但是我意识到会有很多页面和嵌套页面，它们可能有或没有更改标题的类名

所以我不认为为每个页面添加一个条件是一个很好的解决方案，所以我想通过创建一个操作（使用redux btw）来处理这个问题，在需要的地方将类名作为有效负载传递，并且连接的头接收到它以改变颜色，但我不知道仅仅添加一个类名是否太多，reach路由器是否通过路由组件处理此问题