用于移动导航的语义 UI 固定菜单

Question

我有一个固定在底部的语义 ui 菜单，但我不明白如何在不刷新整个页面(包括菜单(的情况下使用它导航到不同的页面。我正在使用 reactjs，文档没有提供任何有关如何在菜单中使用导航的示例。

class FooterMenu extends Component {
  state = {}
  handleItemClick = (e, { name }) => {
    this.setState({ activeItem: name });
  }
  render() {
    const { activeItem } = this.state
  return (
  <div>
    <Menu fixed={'bottom'} widths={4} secondary pointing>
      <Menu.Item
         name='dashboard'
        onClick={this.handleItemClick}
        active={this.props.dashActive}
      >
        <img src={dasha} className="icon-style" />
      </Menu.Item>
      <Menu.Item
        name='activities'
        // active={activeItem === 'activities'}
        onClick={this.handleItemClick}
        active={this.props.activitiesActive}
      >
        <img src={clocko} className="icon-style"/>
      </Menu.Item>
      <Menu.Item
        name='newActivity'
        active={activeItem === 'newActivity'}
        onClick={this.handleItemClick}
      >
        <img src={bello} className="icon-style"/>
      </Menu.Item>
      <Menu.Item
        href='#'
        name='profile'
        active={activeItem === 'profile'}
        onClick={this.handleItemClick}
      >
        <img src={usero} className="icon-style"/>
      </Menu.Item>
    </Menu>
    {/* <div className="ui active tab">
      <Dashboard />
    </div> */}
  </div>
      );
    }
}
export default FooterMenu;

Answer 1

尝试在App中调用它.js并使用react-router