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

【问题标题】：Is it possible to globally define links to use a specific component?是否可以全局定义链接以使用特定组件？
【发布时间】：2020-05-08 06:06:50
【问题描述】：

我目前正在尝试将Nav 与react-router 一起使用。默认行为会重新加载页面，因此我尝试使用来自react-router-dom 的Link 组件。

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

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

【问题讨论】：

标签： office-ui-fabric office-ui-fabric-react

【解决方案1】：

是的，有可能！

需要两件事：

制作一个将 Nav API 转换为 react-router-dom 链接的包装器组件。
将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 groups={links} linkAs={LinkTo} />

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

【讨论】：