错误:将路由组件封装在路由组件中(版本5和6之间的更改)

Question

我正在做一个使用react-router-dom版本5的课程，在那里对react-router-dom进行了一些相当重要的更改。

当启动应用程序时，浏览器中会出现一个白色页面，使用devtools我会收到一条错误消息：<Route> Uncaught：只能用作 <Routes> 元素的子元素，从未直接呈现。请用一条路线包裹你的路线。

在我决定写这篇文章之前，我查看了关于如何解决这个错误的各种论坛，主要的两个解决方案如下：

1. 将react-router-dom的版本更改为旧版本(我不想使用这种方法，我想解决这个问题)
2. 正如错误消息所建议的，将Route包装在Routes中。我就是这么做的。但没起作用。

App.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:无法读取未定义(读取“路径名”)的属性

Answer 1

您将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的其他突然更改。

Answer 2

Route语法也发生了变化。现在它是这样工作的：<Route path="/dashboard" element={<Dashboard/>} />。您可以在文档中查看更多内容