Javascript useState从react导入，但错误用作组件

我从react导入了useState，但它给了我以下错误：“react Hook”useState在函数“navbar”中调用，该函数既不是react函数组件，也不是自定义react Hook函数。“有人看到我的使用有问题吗？”

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { MdFingerprint } from "react-icons/md";
import { FaBars, FaTimes } from "react-icons/fa";

function navbar() {
  const [click, setClick] = useState(false);

  const handleClick = () => setClick(!click);

  return (
    <>
      <div className="navbar">
        <div className="navbar-container container">
          <Link to="/" className="navbar-logo">
            <MdFingerprint className="navbar-icon" />
            Lively
          </Link>
          <div class="menu-icon" onClick={handleClick}>
            {click ? <FaTimes /> : <FaBars />}
          </div>
        </div>
      </div>
    </>
  );
}

export default navbar;

import React，{useState}来自“React”；
从“react router dom”导入{Link}；
从“react icons/md”导入{MdFingerprint}；
从“react icons/fa”导入{fabar，FaTimes}；
函数navbar（）{
const[click，setClick]=useState（false）；
const handleClick=（）=>setClick（！click）；
返回(
活泼的
{单击？：}
);
}
导出默认导航栏；

组件名称应以大写字母开头：

function Navbar() {

---

更多信息请参见官方文档。

React组件名称必须以大写字母开头。尝试将其重命名为Navbar。

尝试将“Navbar”大写，如

function Navbar() {
  const [click, setClick] = useState(false);
  const handleClick = () => setClick(!click);
  return (
<>
  <div className="navbar">
    <div className="navbar-container container">
      <Link to="/" className="navbar-logo">
        <MdFingerprint className="navbar-icon" />
        Lively
      </Link>
      <div class="menu-icon" onClick={handleClick}>
        {click ? <FaTimes /> : <FaBars />}
      </div>
    </div>
  </div>
</>
  );
}
export default Navbar;

函数导航栏（）{
const[click，setClick]=useState（false）；
const handleClick=（）=>setClick（！click）；
返回(
活泼的
{单击？：}
);
}
导出默认导航栏；

---

在React中，组件需要大写

您需要将其重命名为NavBarDoes将其重命名为

Navbar

解决问题？查看