React导入Navbar组件报已定义但未使用警告且页面空白如何解决

• React 自定义组件强制要求首字母大写，你当前定义的组件名是小写的navbar，React 会把小写开头的 JSX 标签识别为原生 HTML 元素，不会当成你导入的自定义组件处理，所以组件不会渲染、页面空白。同时导入的navbar变量因为没有被作为组件正确使用，就会触发「已定义但从未使用」的警告。
• 代码中使用了原生 HTML 的class属性定义样式类，React 中需要用className替代，否则对应样式不会生效。

1. 修改Navbar.js的组件命名和属性写法：

import React from "react"

// 组件名改为首字母大写
const Navbar = () => {
    return(
        <nav>
            {/* class替换为className */}
            <div className="topnav">
                <a className="active" href="#home">Home</a>
                <a className="active" href="#home">Dining Halls</a>
                <a href="#news">Login</a>
                <a href="#contact">Signup</a>
            </div>
        </nav>
    )
}

export default Navbar

2. 修改App.js的导入和组件使用写法：

import React from "react"
import "./App.css"
// 导入时使用首字母大写的名称
import Navbar from "./components/navbar.js";

function App() {
  return (
    // 组件标签同样使用首字母大写
    <Navbar />
  );
}

export default App;

内容的提问来源于stack exchange，提问作者kzb