React Router报错：Cannot read property 'pathname' of undefined原因咨询

我正在使用React结合Router开发应用，运行时出现以下错误：

Uncaught TypeError: Cannot read property 'pathname' of undefined at new Router

我的代码： #

main.jsx

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

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

app.jsx

import { Route } from "react-router-dom"
import Home from "./Pages/Home"

function App() {
  return (
    <>
      <Route path="/" exact component={Home} />
    </>
  )
}

export default App

home.jsx

import Header from "../Components/Header/Header";

function Home() {
  return <><Header /></>
}

export default Home;

依赖版本： #

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.22.3"
},
"devDependencies": {
  "@types/react": "^18.2.64",
  "@types/react-dom": "^18.2.21",
  "@vitejs/plugin-react": "^4.2.1",
  "eslint": "^8.57.0",
  "eslint-plugin-react": "^7.34.0",
  "eslint-plugin-react-hooks": "^4.6.0",
  "eslint-plugin-react-refresh": "^0.4.5",
  "vite": "^5.1.6"
}

错误原因及修复方案 #

1. 错误核心原因

你使用了react-router-dom v6中的Router组件，但它是底层基础组件，必须手动传入history对象才能正常工作，未传入时会因找不到对应属性触发pathname读取报错。

同时，v6的路由写法和v5差异较大：

• Route必须被Routes组件包裹
• 不再支持component属性，需改用element传递组件实例
• exact属性已被移除，v6默认对根路径进行精确匹配

2. 修复步骤

修改 main.jsx

将Router替换为v6推荐的BrowserRouter（它内置了浏览器的history对象，无需手动配置）：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
// 替换为BrowserRouter
import { BrowserRouter } from 'react-router-dom'

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

修改 app.jsx

用Routes包裹Route，替换component为element，移除exact：

// 引入Routes组件
import { Routes, Route } from "react-router-dom"
import Home from "./Pages/Home"

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  )
}

export default App

完成以上修改后，重新运行项目即可正常加载路由。

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