React编译成功但组件不显示，路由相关报错求助

错误原因分析 #

1. "Cannot read properties of undefined (reading 'pathname')"
   你的Navbar组件使用了react-router-dom的路由相关API（比如useLocation钩子或NavLink组件），但整个应用没有被路由容器（BrowserRouter）包裹，导致路由上下文未初始化，无法获取location对象，进而读取pathname时抛出错误。

2. "You cannot render a inside another "
   修改index.js添加BrowserRouter后，应用中出现了多个Router组件嵌套的情况——要么App.js或Navbar.jsx中已经包裹了Router，要么你在多个层级重复添加了路由容器，而React Router不允许嵌套路由容器。

具体修复步骤 #

1. 确保路由容器仅在顶层渲染 #

修改index.js，用BrowserRouter包裹整个应用，这是唯一的路由容器：

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

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

2. 移除其他层级的重复路由容器 #

检查App.js和Navbar.jsx，确保没有再渲染BrowserRouter或其他路由容器组件。比如App.js应该只保留页面结构：

import Navbar from './Navbar';

function App() {
  return (
    <div className="App">
      <Navbar />
      {/* 其他页面组件 */}
    </div>
  );
}

export default App;

3. 验证Navbar组件的路由API使用 #

确保Navbar中使用的路由组件/钩子是正确的，比如NavLink的示例：

import { NavLink } from 'react-router-dom';

export default function Navbar() {
  return (
    <nav className="navbar bg-base-100">
      <div className="container mx-auto">
        <NavLink to="/" className={({ isActive }) => isActive ? 'text-primary font-bold' : 'text-gray-600'}>
          Home
        </NavLink>
        <NavLink to="/about" className={({ isActive }) => isActive ? 'text-primary font-bold' : 'text-gray-600'}>
          About
        </NavLink>
      </div>
    </nav>
  );
}

4. 依赖检查 #

确保项目已安装react-router-dom，如果没有执行：

npm install react-router-dom

验证修复 #

1. 停止当前运行的项目（按Ctrl+C）
2. 重新启动：npm start
3. 检查浏览器控制台是否还有错误，页面是否正常渲染Navbar组件

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