reactjs - React-bootstrap findDOMNode is deprecated in StricMode error

Question

I'm developing an application using React and React-bootstrap. I'm currently facing an issue that when I click on the button to expand the navbar on mobile, it throws the following error:

What I found out so far is that is something related to this function. I have a conditional that if the user is not logged in, it should not print the navlinks on screen.

 const LoggedUserMenu = () => (
    <>
      <Nav.Link as={Link} to="/">
        Meus Drag?es
      </Nav.Link>
      <Nav.Link as={Link} to="/cadastrar-dragoes">
        Cadastrar Drag?o
      </Nav.Link>
      <Nav.Link as={Link} to="/alterar-cadastro">
        Editar Usuário
      </Nav.Link>
      <Nav.Link onClick={handleLogout}>Logout</Nav.Link>
    </>
  );

Here is the full code:

import React, { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { Navbar, Nav, Alert } from "react-bootstrap";
import { GiHydra } from "react-icons/gi";
import { useAuth } from "../contexts/AuthContext";

export default function Appbar() {
  const [error, setError] = useState("");
  const { logout, currentUser } = useAuth();
  const history = useHistory();

  async function handleLogout() {
    setError("");
    try {
      await logout();
      history.push("/login");
    } catch {
      setError("Failed to log out");
    }
  }
  const LoggedUserMenu = () => (
    <>
      <Nav.Link as={Link} to="/">
        Meus Drag?es
      </Nav.Link>
      <Nav.Link as={Link} to="/cadastrar-dragoes">
        Cadastrar Drag?o
      </Nav.Link>
      <Nav.Link as={Link} to="/alterar-cadastro">
        Editar Usuário
      </Nav.Link>
      <Nav.Link onClick={handleLogout}>Logout</Nav.Link>
    </>
  );

  return (
    <div>
      <Navbar
        collapseOnSelect
        expand="lg"
        variant="dark"
        fixed="top"
        style={{ background: "#191D24" }}
      >
        <Navbar.Brand href="/">
          <GiHydra size="2rem" className="mr-3" style={{ fill: "#f2a365" }} />
          DragonDex
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse
          id="responsive-navbar-nav"
          className="justify-content-end"
        >
          <Nav>{currentUser ? <LoggedUserMenu /> : ""}</Nav>
        </Navbar.Collapse>
      </Navbar>
      {error && <Alert variant="danger">{error}</Alert>}
    </div>
  );
}

Does anyone have an idea on how to resolve this issue?

Answer 1

等待大神答复