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

Question

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

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

它还提供了linkAsprop ，但它改变了“Group Header”的全部内容，并采用了Nav首先使用的所有漂亮的 CSS 样式优势。

有没有办法真正让这个工作？

Answer 1

我做了更多的谷歌搜索，发现这个codepen使用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 进行逆向工程并自己渲染才能使其正常工作。