如何将 RouterLink 与 Microsoft FluentUI React Link 组件一起使用答案

【问题标题】：How to use RouterLink with Microsoft FluentUI React Link component如何将 RouterLink 与 Microsoft FluentUI React Link 组件一起使用
【发布时间】：2020-09-07 12:43:37
【问题描述】：

非常直接。我已经在其他 Microsoft Fluent UI 控件上看到了 React Router Link 使用示例。不过，我还没有找到将它与 Fluent UI Link 组件一起使用的方法。

【问题讨论】：

标签： reactjs react-router react-router-dom react-router-component fluent-ui

【解决方案1】：

您可以在导航上使用 onLinkClick 属性，如果您阻止默认并推送以响应路由器历史记录，您将获得相同的行为，而不会影响流畅 ui 的外观和感觉

import React from "react"
import import { withRouter } from "react-router-dom"
import { Nav } from "@fluentui/react"

class MyNavComponent extends React.Component {
    onLinkClick(evt, item){
        evt.preventDefault()
        this.props.history.push(item.url)
    }
    render(){
        return <Nav
            onLinkClick={this.onLinkClick.bind(this)}
            isOnTop
            groups={your..groups..here}
        />
    }
}
export const MyRoutedNavComponent = withRouter(MyNavComponent)

【讨论】：

【解决方案2】：

能够使用Fluent UI Link implementation section 中的as 属性来完成这项工作：

import React from 'react';
import { Link as RouterLink } from 'react-router-dom';

import { Link } from '@fluentui/react';

const ComponentName: React.FC = () => (
  <Link as={RouterLink} to="/pathName">
    Link Text
  </Link>
);

export default ComponentName;

【讨论】：