0

我正在与使用 React Router 时出现的 Fluent UI Nav Link 问题作斗争。当您独立使用 Nav 组件时，一切正常。问题是当您尝试将它与 React Router 一起使用时 - 似乎没有合适的方法来修改 Nav 组件以显示和处理路由器链接。我在 Github 上的官方 Fluent UI 存储库中找到了以下线程：https ://github.com/microsoft/fluentui/issues/915

我正在尝试人们在那里提出的不同解决方案，对我来说没有任何效果。在编译过程中，每一个都会导致某种错误。我想使用的最近的解决方案是：

<Nav
    onLinkClick={(element, event) => {
        event.preventDefault();
        history.push(element.url);
    }}
    styles={navStyles}
    groups={navLinkGroups}
/>

编译上述代码时，每次出现以下错误：

Object is possibly 'undefined'.  TS2532

52 |                <Nav
53 |                    onLinkClick={(element, event) => {
54 |                            event.preventDefault();
   |                            ^
55 |                            history.push(element.url);
56 |                      }}
57 |                    styles={navStyles}

是因为我使用的是打字稿吗？我应该改变什么？

4

1 回答 1

0

尝试使用可选链接：

event?.preventDefault()

当引用或函数可能未定义或为空时，可选链接运算符提供了一种简化通过连接对象访问值的方法。来源：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

于 2020-09-08T08:39:28.507 回答