Question

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

Answer 1

可以使用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;

Answer 2

您可以在 Nav 上使用道具 onLinkClick，如果您阻止默认并推送以响应路由器历史记录，您将获得相同的行为，而不会影响 fluent 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)

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

2 个答案: