reactjs - 如何将 RouterLink 与 Microsoft FluentUI React Link 组件一起使用

Question

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

Answer 1

能够使用Fluent UI Link 实现部分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;

Answer 2

您可以在导航上使用该道具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)