React函数式组件中如何仅非首页修改Header组件h1字体颜色为黑色

方案1：在Header组件内使用useLocation钩子（无需修改路由配置，推荐） #

你使用的是react-router路由体系，直接在函数式Header组件中调用useLocation钩子获取当前访问路径，判断是否为首页即可动态控制h1的颜色样式。

修改后的Header组件代码： #

import { Link, useLocation } from 'react-router-dom'
// bootstrap的Dropdown相关组件导入此处省略

const Header = () => {
  const location = useLocation()
  // 判断当前是否处于首页
  const isHome = location.pathname === '/'

  return (
    <nav>
      <Link to='/' className="title">
        {/* 动态绑定内联样式，非首页时颜色设为黑色 */}
        <h1 style={{ color: isHome ? '' : '#000' }}>Ioana Savin</h1>
        {/* 如果内联样式不生效，改用动态类名方案，优先级更高：
        <h1 className={isHome ? '' : 'text-black'}>Ioana Savin</h1>
        同步在全局CSS文件中添加规则：
        .title h1.text-black {
          color: #000 !important;
        }
        */}
      </Link>

      <div className="head">
        <DropdownButton title="Portfolio" className='button'>
          <Dropdown.Item href='/fashion'>Fashion</Dropdown.Item>
          <Dropdown.Item href='/portraits'>Portraits</Dropdown.Item>
          <Dropdown.Item href='/bnw'>BnW</Dropdown.Item>
          <Dropdown.Item href='/analogue'>Analogue</Dropdown.Item>
          <Dropdown.Item href='/clienti'>Clienti</Dropdown.Item>
        </DropdownButton>
        
        <Link to='/portfolio' className="link">   
          <DropdownButton title="Contact" className='button' />     
        </Link>
      </div>
    </nav>
  )
}

export default Header

内联样式失效原因说明： #

如果内联样式没有生效，大概率是现有CSS样式优先级高于内联样式，比如你全局定义了.title h1的颜色规则，或是bootstrap默认样式添加了!important标记，改用动态类名+CSS规则加!important的方式即可覆盖原有样式。

方案2：通过路由Props传参控制（无需在Header内引入路由钩子） #

如果你不想让Header组件耦合路由逻辑，可以修改路由配置，给不同页面下的Header传入是否为首页的标记位：

修改后的路由配置代码： #

<Router>
  <div className="app">
    <Switch>
      <Route path='/portraits'>
        <Header isHome={false} />
        <Portraits />
        <Footer />
      </Route>

      <Route path='/contact'>
        <Header isHome={false} />
        <Contact />
        <Footer />
      </Route>

      <Route path='/'>
        <Header isHome={true} />
        <Home />
      </Route>
    </Switch>
  </div>
</Router>

之后Header组件直接接收isHome属性即可判断样式，逻辑和方案1完全一致。

内容的提问来源于stack exchange，提问作者Gabriele Sabatino