reactjs - 如何根据位置更改标题背景颜色

Question

如何根据我在 React 项目中所在的路由/页面更改标题颜色？
我看过 withRouter 但我不确定如何使用该示例。
我只想做一些事情，比如如果路由不是 Home 组件，则将标题的背景颜色更改为蓝色。看起来很简单，但无法弄清楚。

Answer 1

您可以使用添加到组件的 location Prop ，方法是通过 withRouter 将组件连接到路由器。从那里你可以根据你所在的路由路径应用条件样式。

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class Header extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    const headerColor = location.pathname === 'home' ? { background: 'white'} : { background: 'blue' }
    return (
  <div style={headerColor}>You are now at {location.pathname}</div>
  )
}
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const AdaptiveHeader = withRouter(Header)

export default AdaptiveHeader

对于上面的示例，我重新利用了找到的代码 here .