react-router-dom 中的路由器在控制台中拋出錯誤，沒有任何消息

Question

我目前正在構建一個應用程序，並且遇到了來自 Route 組件的奇怪的 react-router-dom 錯誤。

我不確定為什么在 webpack 中啟用“devtool：'inline-source-map'”時會收到生產錯誤消息，但基本上我不確定是什么引發了錯誤。 這是我當前的前端設置

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import HomePage from './components/Homepage';

render(
  <Router>
    <div> Hello from react </div>
    <Route path="/" element={<HomePage />} /> 
  </Router>,
  document.getElementById('app-portal')
);

並通過注釋掉<Route path="/" element={<HomePage />} />該應用程序可以正常工作，但我當然需要 Route 才能為該應用程序工作...

這是我的 package.json 依賴項。

"dependencies": {
    "axios": "^0.26.1",
    "express": "^4.17.3",
    "html-webpack-plugin": "^5.5.0",
    "nodemon": "^2.0.15",
    "path": "^0.12.7",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-stage-2": "^7.8.3",
    "@babel/register": "^7.7.4",
    "assert": "^2.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^8.2.5",
    "babel-plugin-styled-components": "^1.12.0",
    "css-loader": "^6.7.1",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.8.2",
    "file-loader": "^6.2.0",
    "morgan": "^1.10.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  },

有人遇到過類似的問題嗎？ 如果是這樣，它是如何解決的？

Answer 1

正如評論中所指出的，該應用程序是一個生產版本，因此調試信息被刪除了。 但是在錯誤日志中，那些是鏈接，所以您實際上可以單擊它並查看某種形式的代碼，看看問題出在哪里，代碼拋出錯誤。

根據您的代碼，盡管我假設錯誤是您沒有將Route組件渲染到Routes組件中。 Routes組件負責處理路由路徑匹配，並且在react-router-dom@6中是必需的。

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './components/Homepage';

render(
  <Router>
    <div>Hello from react</div>
    <Routes>
      <Route path="/" element={<HomePage />} /> 
    </Routes>
  </Router>,
  document.getElementById('app-portal')
);

Answer 2

就我而言，當我將我的應用程序發布到 github-page 時，發生了這個錯誤。 原因是我的錯誤。 我設置了兩次<BrowserRouter />組件。 首先，在 index.tsx

root.render(
  <BrowserRouter basename={`${process.env.PUBLIC_URL}`}>
    <App />
  </BrowserRouter>
);

並在 app.tsx 中進行設置，然后設置<BrowserRouter /> 。 所以，當我在 app.tsx BrowserRouter 組件中刪除時，一切正常。