React项目NavLink组件不显示 页面空白问题排查修复

页面空白是因为使用v6及以上版本react-router-dom时，沿用了v5版本的废弃API，渲染阶段抛出路由错误导致React中断整页渲染。

• Route组件语法不符合v6规范：v6不支持将页面组件作为Route子节点传入，必须通过element属性传入JSX格式的组件
• NavLink使用了v6已移除的API：activeClassName、exact属性在v6版本中已删除，激活状态判断需要通过函数入参实现
• 组件命名大小写不统一：NavBar.js内组件定义名为Navbar（b小写），导入时使用NavBar（B大写），大小写敏感的操作系统会直接报模块找不到错误
• Tailwind类名错误：bg-white-500不是Tailwind内置类，不会生效
• 缺失根路径/的路由匹配规则，访问首页时无对应渲染内容

App.js #

import React from "react";
import NavBar from "./components/NavBar";
import About from "./components/About";
// 自行引入你编写的Home、Socials、Login页面组件
import Home from "./components/Home";
import Socials from "./components/Socials";
import Login from "./components/Login";
import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <>
      <BrowserRouter>
        <NavBar />
        <div className="container mt-2" style={{ marginTop: 40 }}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/socials" element={<Socials />} />
            <Route path="/login" element={<Login />} />
          </Routes>
        </div>
      </BrowserRouter>
    </>
  );
}

export default App;

NavBar.js #

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

// 组件名和导入名保持大小写一致
const NavBar = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    <nav
      className="relative flex flex-wrap items-center justify-between px-2 py-2 bg-white mb-3 border-b-2 drop-shadow-md"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
        <NavLink
          className={({isActive}) => `navbar-item ${isActive ? "is-active" : ""}`}
          to="/"
        >
          BrandNAME
        </NavLink>
        
        <div className={`navbar-menu ${isOpen && "is-active"}`}>
          <div className="flex flex-col lg:flex-row list-none lg:ml-auto">
            <NavLink
              className={({isActive}) => `navbar-item px-3 py-2 flex items-center text-md leading-snug text-black cursor-pointer hover:opacity-75 ${isActive ? "is-active" : ""}`}
              to="/about"
            >
              About
            </NavLink>

            <NavLink
              className={({isActive}) => `navbar-item px-3 py-2 flex items-center text-md leading-snug text-black cursor-pointer hover:opacity-75 ${isActive ? "is-active" : ""}`}
              to="/socials"
            >
              Socials
            </NavLink>
          </div>

          <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
                <NavLink to="/login" className="button is-white">Log in</NavLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};
export default NavBar;

替换代码后刷新页面，打开浏览器控制台确认无红色报错，点击导航栏的各个链接即可正常切换对应页面内容。

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