Reactjs 移动导航的语义ui固定菜单

我有一个固定在底部的语义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;

类页脚菜单扩展组件{
状态={}
handleItemClick=（e，{name}）=>{
this.setState（{activeItem:name}）；
}
render（）{
const{activeItem}=this.state
返回(
{/* 
*/}
);
}
}
导出默认的页脚菜单；

尝试在App.js中调用它并使用react路由器