Question

我将{{backgroundColor: 'red'}}与下面的导航栏代码一起使用。

{ BrowserRouter }

当我在链接之间导航时，活动状态不会改变。仅当我刷新浏览器时，活动状态才会更改为浏览器URL当前所在的链接。

任何帮助将不胜感激！

Answer 1

Menu.item不会自动更改，除非您设置了道具active=true，并且真实值应取决于当前路由器的URL。

<Menu stackable>
  <Menu.Item active={this.isActive('/')} as={NavLink} exact to='/' content='Home' />
  <Menu.Item active={this.isActive('/abc')} as={NavLink} exact to='/abc' content='ABC' />
  <Menu.Item active={this.isActive('/def')} as={NavLink} exact to='/def' content='DEF' />
</Menu>

从语义UI中查看以下示例-https://react.semantic-ui.com/collections/menu#types-basic

import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'

export default class MenuExampleBasic extends Component {
  state = {}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu>
        <Menu.Item
          name='editorials'
          active={activeItem === 'editorials'}
          onClick={this.handleItemClick}
        >
          Editorials
        </Menu.Item>

        <Menu.Item name='reviews' active={activeItem === 'reviews'} onClick={this.handleItemClick}>
          Reviews
        </Menu.Item>

        <Menu.Item
          name='upcomingEvents'
          active={activeItem === 'upcomingEvents'}
          onClick={this.handleItemClick}
        >
          Upcoming Events
        </Menu.Item>
      </Menu>
    )
  }
}

Menu.Item的活动状态不适用于NavLink（语义UI响应）

1 个答案: