Question

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

我尝试实现 withrouter ，但没有成功。我很难理解的是如何在Route之外更改组件的类。就我而言，我必须更改为特定的课程。

<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

您可以将道具从路线传递到组件，

<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

您可以使用

呈现菜单

Dim shape_index() As Variant

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

这将为菜单组件提供路由器道具，以便您可以检查<Route component={Menu} />并根据需要对其进行样式设置。

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()}

如何更改React路由器上的标头背景？

5 个答案: