使用React与React Router Dom V6启动后页面空白问题求助

1. React 18 渲染方式不匹配（空白核心原因） #

你的index.js导入了react-dom/client的createRoot，但仍使用旧版ReactDOM.render方法，这在React 18中会触发兼容性问题，直接导致页面无法渲染。

修复代码：

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

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

2. Navbar 路由链接路径不匹配 #

• Team页面的Link路径写的是/teams，但App.js中配置的路由是/team，路径不一致会导致跳转后404
• Demo页面的Link路径写的是/demopage.html，但路由配置是/demo，同样不匹配

修复Navbar.js中的Link：

// Team链接修正
<Link to="/team" className="text-xl hover:text-orange-500 duration-500 md:text-white text-black hover:underline">Team</Link>

// Demo链接修正
<Link to="/demo" className="text-xl hover:text-orange-100 text-white duration-500">Demo</Link>

3. 原生DOM操作与事件绑定不规范 #

Navbar中的Menu函数用原生document.querySelector操作DOM，且用字符串形式的onclick绑定事件，不符合React组件化逻辑，还可能导致元素找不到或事件失效。建议改用React状态管理控制菜单显示：

修复Navbar.js（改用React状态）：

import React, { useState } from 'react';
import logo from '../Media/eclipse.png';
import { Link } from 'react-router-dom';

const Navbar = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <div>
      <div id="navbar" className="fixed top-0 left-0 right-0 z-50">
        <nav className="p-3 bg-transparent md:flex md:items-center md:justify-between border-0 z-50 max-h-16">
          <header className="flex justify-between items-center">
            <span className="text-2xl font-bold cursor-pointer">
              <img className="h-12 mb-1 inline md:ml-12" src={logo} />
              <h1 className="pt-5 inline"><a href="#page-1"></a></h1>
            </span>
            <span className="text-3xl cursor-pointer md:hidden block" onClick={toggleMenu}>
              <ion-icon name={isMenuOpen ? "close" : "menu"} className="text-white"></ion-icon>
            </span>
          </header>
          <ul className={`list-none md:flex md:items-center z-[-1] md:z-auto md:static absolute w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 transition-all ease-in duration-500 bg-white md:bg-transparent ${isMenuOpen ? 'top-[80px] opacity-100' : 'top-[-400px] opacity-0'}`}>
            <li className="mx-4 my-6 md:my-0">
              <Link to="/" className="text-xl hover:text-orange-500 duration-500 md:text-white text-black hover:underline">Home</Link>
            </li>
            <li className="mx-4 my-6 md:my-0">
              <Link to="/team" className="text-xl hover:text-orange-500 duration-500 md:text-white text-black hover:underline">Team</Link>
            </li>
            <li className="mx-4 my-6 md:my-0 rounded-xl text-black px-5 flex items-center bg-black">
              <Link to="/demo" className="text-xl hover:text-orange-100 text-white duration-500">Demo</Link>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  )
}

export default Navbar

4. 图片标签未正确闭合 #

原代码中<img>使用了<img></img>形式，JSX中需改为自闭合标签<img />，避免DOM解析异常。

完成以上修复后，重新执行npm start，页面即可正常渲染。

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