如何在反应路由器上更改标头背景

Question

我是新手，并尝试根据我所在的路由器路径动态更改标头的背景。我不想使用冗余。

我尝试使用路由器实现，但没有成功。对我来说，最难理解的部分是如何更改路由之外的组件类。就我而言，我必须更改为特定的类。

<Menu className="White"/> // <- wanna change this className="" based on the route
<Switch>
<Route exact path="/" component={Home} /> // <- this should have White className menu  <Menu className="white" />
<Route exact path="/lala" component={lala} /> // <- this should have Black className menu <Menu className="black" />
</Switch>

我希望当我改变路线时，我的菜单(标题(颜色会改变。

Answer 1

您可以将 props 从路由传递到组件，如下所示：

<Switch>
<Route exact path="/" render={() => {
<Home cls="white">}} />
<Route exact path="/lala" render={() => {
<lala cls="black">}} />
</Switch>

然后在您的组件中您可以使用它，

<Menu className={this.props.cls}/>

Answer 2

因此，如果您尝试以下操作：

function MenuComponent(props) {
  const [className, setClassName] = useState("white")
  useEffect(function() {
    setClassName(props.match.path === "/lala" ? "yellow" : "white")
  }, [props.match.path])
  return (
    <div className={className}>
      ...etc
    </div>
  )
}
export const Menu = withRouter(MenuComponent)

withRouter是您可以将组件包装进去的东西，包装的组件将接收所有路由器属性，例如匹配和历史记录。然后，您可以检查路径在效果或类似componentDidUpdate期间是否更改，然后相应地更新组件的类。

Answer 3

您可以使用

以下方法渲染菜单

<Route component={Menu} />

但是您需要将样式移动到菜单组件内部。

这将为菜单组件提供路由器道具，以便您可以检查location并根据需要设置样式。

Answer 4

您还可以创建一个检查器，如下所示：

const currentUrl= window.location.href
const clsColor=
 if(currentUrl.contains('/url-1'){ //or .includes()
    return: 'red'
  }else if(currentUrl.contains('/url-2')
    return: 'white'
  }else{
    return: 'default-color'
  }
// you can also use a cslColor = currentUrl.includes('/url-3') ? 'red' : 'white'

Answer 5

我的首领给我这个简单的解决方案：

import * as cn from 'classnames' 
    const Menu: React.FC<Props> = ({className, children, authenticated, handleAuthentication, location}) => {
        function isHome() {
            return location.pathname === '/' ? true : false;
        }
        return(
                <div className={cn('mydefaultclass', {'bgwhite': !isHome()}, className)}>
//etc
)}

在我的 App.tsx 中，我只是保留我的路线，没有任何变化。所以在这种情况下，我的家应该有透明的bg，所以采用默认类，当我进入其他路径时，我的bg变成白色。

所以我只添加这个逻辑

 function isHome() {
                return location.pathname === '/' ? true : false;
            }

而这个

{'bgwhite': !isHome()}