未捕獲的型別錯誤：無法使用BrowserRouter讀取未定義的屬性（讀取“路徑名”）

所以我一直在試圖弄清楚為什么會出現這些錯誤。我找到了一些資源來幫助解決我在使用 BrowserRouter 時遇到的一些錯誤，但我找不到其他任何東西來進一步解決現在正在發生的事情。我已經嘗試了多種解決方案，但在這個問題上我找不到其他任何東西，所以我不確定我哪里出錯了。

版本：

• npm - 8.10.0
• 節點 - 16.13.0
• 反應 - ^18.1.0
• 反應域 - ^18.1.0
• 反應路由器 dom - ^5.2.0
• 反應腳本 - 5.0.1

錯誤：

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
    at Router (components.tsx:197:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)

和

The above error occurred in the <Router> component:

    at Router (http://localhost:3000/static/js/bundle.js:39806:15)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

我試過的：

1. 洗掉 react-router-dom 并重新安裝它。
2. 洗掉 node_modules 檔案夾并在沒有它的情況下運行應用程式，然后重新安裝 npm。連同洗掉 package-lock.json。
3. 嘗試使用 --force 清理 npm 快取

代碼： App.js

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
} from "react-router-dom";

import Home from './AppHome'

function App() {
    return (
      <div>
        <BrowserRouter>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/test">Test Page</Link>
          </nav>

          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/test" element={(
              <div><h1>Test Test Test</h1></div>
            )}/>
          </Routes>
        </BrowserRouter>
      </div>
    )
}

export default App;

AppHome.js

import React from "react";

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

export default Home;

index.js

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: bitly url
//reportWebVitals();

包.json

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^1.1.2",
    "npm": "8.10.0",
    "node": "16.13.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3000",
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "web-vitals": "^2.1.4"
  }
}

uj5u.com熱心網友回復：

在我看來，您有 2 個路由器，而接收路徑的外部路由器沒有任何要遵循的路由。

在 index.js 中洗掉路由器

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

//import reportWebVitals from './reportWebVitals';

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

標籤：javascript 节点.js 反应

上一篇：在AngularIonic6中選擇路由器轉換

下一篇：我希望這段代碼回傳未定義但它回傳函式