錯誤：將您的 Route 組件包裝在 Routes 組件中（在 react-router-dom 版本 5 和 6 之間更改）

Question

我正在做一門課程，其中使用 react-router-dom 的第 5 版，其中react-router-dom react-router-dom了一些非常重大的變化。

當啟動應用程序時，瀏覽器中會出現一個白頁，使用 devtools 我收到一條錯誤消息：未捕獲錯誤： <Route>只能用作<Routes>元素的子元素，從不直接呈現。 請將您的路線包裝在路線中。

在我決定寫這篇文章之前，我瀏覽了各種論壇關於如何解決這個錯誤，兩個主要的解決方案如下：

1. 將react-router-dom的版本更改為舊版本（我不想使用這種方法，我想解決問題）
2. 正如錯誤消息建議將Route包裝在Routes中。 這就是我所做的。 但它沒有用。

應用程序.js

import "./App.css";
import Dashboard from "./components/Dashboard";
import Header from "./components/Layout/Header";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Routes, Router, Route } from "react-router-dom";
import AddProject from "./components/Project/AddProject";
import { Component } from "react";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Header />
          <Routes>
            <Route exact path="/dashboard" component={Dashboard} />
            <Route exact path="/addProject" component={AddProject} />
          </Routes>
        </div>
      </Router>
    );
  }
}

export default App;

我更改了向其添加Routes的導入。 我將Route包裹在Routes中。 但它不斷收到同樣的錯誤。

我不知道我是否應該刪除Router ，但如果我這樣做，它會收到錯誤： Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

Answer 1

Route語法也發生了變化。 現在它是這樣工作的： <Route path="/dashboard" element={<Dashboard/>} /> 。 您可以在文檔中查看更多信息

Answer 2

您將BrowserRouter導入為Routes ，然后導入低級Router 。 您仍然缺少包裝路線的真正Routes組件。

修復導入，然后修復路由 API/語法。

例子：

import {
  BrowserRouter as Router, // <-- this is the router
  Routes,                  // <-- this is the Routes
  Route
} from "react-router-dom";
import AddProject from "./components/Project/AddProject";
import { Component } from "react";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Header />
          <Routes>
            <Route
              path="/dashboard"
              element={<Dashboard />}  // <-- element prop takes ReactNode/JSX
            />
            <Route
              path="/addProject"
              element={<AddProject />} // <-- element prop takes ReactNode/JSX
            />
          </Routes>
        </div>
      </Router>
    );
  }
}

您還可以查看從 v5遷移/升級指南升級以了解從 RRDv5 到 RRDv6 的其他重大更改。