reactjs - React-bootstrap findDOMNode 在 StricMode 错误中被弃用

Question

我正在使用 React 和 React-bootstrap 开发应用程序。我目前遇到的问题是，当我单击按钮以在移动设备上展开导航栏时，会引发以下错误：

到目前为止，我发现这与此功能有关。我有一个条件，如果用户没有登录，它不应该在屏幕上打印导航链接。

 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>
    </>
  );

这是完整的代码：

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>
  );
}

有谁知道如何解决这个问题？

标签： reactjsreact-bootstrap