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

Question

有没有办法让 Fluent UI（以前的 Office Fabric UI）导航组件正常工作，将其 <a> 元素链接替换为来自 Reach Router 的自定义链接（例如 <Link>）？

Fluent UI Nav 提供了一个 onRenderLink 属性，但这只会改变最里面的 <a> 元素的内部内容。它使用传统的<a> 将外部包装元素留下，这会在用户使用它时导致整个页面重新呈现。

它还提供了 linkAs 属性，但它改变了“组标题”的整个内容，并采用了首先使用 Nav 的所有漂亮的 CSS 样式优势。

有没有办法让它真正发挥作用？

Answer 1

我做了更多的谷歌搜索，发现了这个使用 LinkAs 的代码笔：

(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 进行逆向工程并自己渲染才能使其正常工作。