With React Semantic UI use NavLink to set active page class?

走远了吗. 提交于 2019-12-06 01:40:00

问题


Im using Semantic UI React and React Router. The NavLink componenet from React Router knows then its the active page link and can set an active class:

<NavLink to="/" exact activeClassName="active">Home</NavLink>

However this doesn't work with Semantic UI React:

    <Menu.Item
      header
      as={NavLink}
      to="./"
      children="Diplomat"
      activeClassName="active"
    />

I can see in the browser that the aria-current property is being set to true correctly. So NavLink does 'know' when its active but I cant pass this to Menu.Item.


回答1:


I made a mistake. I just needed an exact attribute and a different path. Now it works.

<Menu.Item header as={NavLink} exact to="/" children="Diplomat" />


来源:https://stackoverflow.com/questions/47427342/with-react-semantic-ui-use-navlink-to-set-active-page-class

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!