无法读取未定义错误的属性“路径名”

Question

我正在使用路由器在 React 中创建应用程序，下面是我的代码

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"
  }

我收到错误为

未捕获类型错误：无法在新路由器上读取未定义的属性“路径名”

为什么我会收到此错误

Answer 1

每个

<Route>

都应该是

<Routes>

的直接子代。

---

将您的主要更改为：

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

然后在

<Routes>

中定义所有的

<Route>

和

App

：

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