如何根据我在 React 项目中所处的路线/页面更改标题颜色？
我看过了，withRouter但我不确定如何使用这个例子。
我只想做一些事情，如果路由不是 Home 组件，然后将标题的背景颜色更改为蓝色。看起来很简单，但无法弄清楚。
如何根据位置在react中更改标题背景颜色
IT技术
reactjs
react-router
styled-components
2021-05-03 02:57:32
2个回答
您可以通过将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
对于上面的示例，我重新利用了此处找到的代码。
您可以使用this.props.locationfromwithRouter来获取当前路径名。使用它来检查/home您的主页或任何您的主页，然后您可以将一个类添加到更改颜色的 Header 中。