如何通过Fluent UI Nav正确使用到达路由器链接

问题描述

是否有一种方法可以使Fluent UI（以前称为Office Fabric UI）Nav组件正常工作，而将其<a>元素链接替换为自定义链接（例如，到达路由器的<Link>）？

Fluent UI Nav提供了onRenderLink道具，但是仅更改了最里面<a>元素的内部内容。它将外部包裹元素保留为传统的<a>，当用户使用它时会导致整个页面重新呈现。

它还提供了linkAs道具，但是改变了“组头”的全部内容，并采取了首先使用Nav的所有CSS样式优点。 / p>

有没有办法使它真正起作用？

解决方法

我做了一些谷歌搜索，发现这个使用LinkAs的codepen：

(props) => {
   return <Link className={props.className} style={{color: 'inherit',boxSizing: 'border-box'}} to={props.href}>
     <span style={{display: 'flex'}}>
      { !!props.iconProps && <Icon style={{margin: '0 4px'}} {...props.iconProps} /> }
      {props.children}
      </span>

    </Link> ;
  }

有点令人失望的是，您基本上必须对其CSS进行反向工程并自己进行渲染才能使之正常工作。