React项目运行npm start后页面不显示组件内容求助

我正在创建一个React应用，运行npm start后，App.js中添加的元素无法在网站上显示，但index.html的内容可以正常加载。我目前仅尝试创建导航栏菜单，但网站上无任何内容显示，即使在App函数中添加<h1>Test</h1>也无效。

注：我使用的是旧版本react-router-dom，因此用Switch而非Routes

我的代码 #

App.js #

import './App.css';
import React from 'react';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <>
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" exact />
      </Switch>
      </Router>
    </>
  );
}

export default App;

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('root'));

Navbar.js #

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

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

  const handleClick = () => setClick(!click);
  const closeMobileMenu = () => setClick(false);
  return (
      <>
          <nav className="navBar">
              <div className='navbar-container'>
                  <Link to="/" className="navbar-logo">
                  <img alt="collabrity" src="images/icon.png" width="25" height="25"></img>collabrity
                  </Link>
                  <div className='menu-icon' onClick={handleClick}>
                      <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
          </div>
          <ul className={click ? 'nav-menu active' : 'nav-menu'}>
            <li className='nav-item'>
              <Link to='/' className='nav-links' onClick={closeMobileMenu}>
                Home
              </Link>
            </li>
          </ul>
              </div>
        </nav>
      </>
  )
}

export default Navbar

package.json #

{
  "name": "NAME",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

解决方向 #

• 修复React 18渲染API：你使用的是React 18，但代码仍沿用旧版ReactDOM.render，这会导致组件无法正常挂载。修改index.js为React 18标准写法：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• 补全Font Awesome依赖：Navbar中使用了fas fa-times和fas fa-bars图标，但package.json未包含相关依赖，需安装并引入：

  1. 执行安装命令：npm install @fortawesome/fontawesome-free
  2. 在index.js或App.js中引入CSS：import '@fortawesome/fontawesome-free/css/all.min.css';

• 检查静态资源路径：确保images/icon.png存在于项目public目录下（React静态资源需放在此目录），否则图片会加载失败。

• 排查CSS隐藏问题：暂时注释掉App.css的引入，检查是否因样式设置（如display: none）导致元素隐藏。

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