0

I'm fighting with Fluent UI Nav Link issue which appears when you user React Router. When you use Nav component standalone everything works fine. The problem is when you try to use it with React Router - it seems there's no a proper way to modify Nav component to display and process Router links. I found following thread on official Fluent UI repository on Github: https://github.com/microsoft/fluentui/issues/915

I'm trying different solutions people presented there, nothing works for me. Each one results in some kind of error during compilation. The recent solution I wanted to use is:

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

When compiling above code, each time I get following error:

Object is possibly 'undefined'.  TS2532

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

Is it because I'm using Typescript? What should I change?

VIPPER
  • 326
  • 4
  • 24

1 Answers1

0

Try with optional chaining:

event?.preventDefault()

The optional chaining operator provides a way to simplify accessing values through connected objects when it's possible that a reference or function may be undefined or null. Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

ZeZe
  • 16
  • 3