office-ui-fabric - 是否可以全局定义链接以使用特定组件？

Question

我目前正在尝试使用Navwith react-router。默认行为会重新加载页面，因此我尝试使用Link来自react-router-dom.

覆盖时很难保留默认样式linkAs。

是否有任何全局方法来覆盖链接导航行为？
就像定义一个全局链接渲染函数，然后我可以设置它来渲染Link组件react-router-dom？

Answer 1

是的，有可能！

需要两件事：

1. 制作一个将 Nav API 转换为 react-router-dom 链接的包装器组件。
2. 指定组件的linkAs道具Nav。

包装器组件

这是一个简单的组件，它在使用 Fabric 中的样式时创建 react-router-dom 链接：

import { Link } from "react-router-dom";
const LinkTo = props => {
  return (
    <Link to={props.href} className={props.className} style={props.style}>
      {props.children}
    </Link>
  );
};

指定在 Nav 中使用的组件

 <Nav groups={links} linkAs={LinkTo} />

还在https://codesandbox.io/s/xenodochial-wozniak-y10tr?file=/src/index.tsx:605-644创建了一个完整的工作示例