为登录页面创建React导航栏时出现组件无效错误求助

错误原因 #

你遇到的type is invalid错误，核心原因是**Link组件导入错误**：Link不属于React核心库，而是react-router-dom路由库的组件，你从react包导入后，Link实际是undefined，导致组件渲染失败。另外代码里还有一个Bootstrap类名的小错误，也会影响样式显示。

解决步骤 #

1. 安装react-router-dom（如果未安装）
   执行以下命令安装路由依赖：

npm install react-router-dom
# 或使用yarn
yarn add react-router-dom

2. 修正Link的导入语句
   将错误的导入：

import { Link } from "react";

替换为：

import { Link } from "react-router-dom";

3. 修正导航列表项的类名
   Bootstrap的导航列表项类名是nav-item，不是nav-list，需要修改所有<li>的className。

修正后的完整代码 #

import React from "react";
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
      <Link to="/" className="navbar-brand">React Routing Example</Link>
      <div className="ml-auto">
        <ul className="navbar-nav">
          <li className="nav-item"><Link className="nav-link" to="/home">Home</Link></li>
          <li className="nav-item"><Link className="nav-link" to="/about">About</Link></li>
          <li className="nav-item"><Link className="nav-link" to="/service">Services</Link></li>
          <li className="nav-item"><Link className="nav-link" to="/contact">Contact</Link></li>
        </ul>
      </div>
    </nav>
  );
}

export default Navbar;

额外注意 #

确保你的应用根组件已经用路由容器包裹，比如在App.js中：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./Navbar";
// 导入你的页面组件
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* 配置其他页面路由 */}
      </Routes>
    </Router>
  );
}

export default App;

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