[英]Error: wrap your Route components in a Routes component (change between versions 5 and 6 of react-router-dom)
I'm doing a course where version 5 of react-router-dom
is used where there have been some pretty significant changes to react-router-dom
.我正在做一门课程,其中使用 react-router-dom 的第 5 版,其中
react-router-dom
react-router-dom
了一些非常重大的变化。
When, launch the application, a white page appears in the browser, using devtools I get an error message: Uncaught Error: A <Route>
is only ever to be used as the child of <Routes>
element, never rendered directly.当启动应用程序时,浏览器中会出现一个白页,使用 devtools 我收到一条错误消息:未捕获错误:
<Route>
只能用作<Routes>
元素的子元素,从不直接呈现。 Please wrap your Route in a Routes.请将您的路线包装在路线中。
Before I decided to write this post, I looked through various forums on how to solve this error, the two main solutions are as follows:在我决定写这篇文章之前,我浏览了各种论坛关于如何解决这个错误,两个主要的解决方案如下:
react-router-dom
to an older one (I do not want to use this method, I would like to solve the problem)react-router-dom
的版本更改为旧版本(我不想使用这种方法,我想解决问题)Route
in Routes
.Route
包装在Routes
中。 This is what I did. App.js应用程序.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;
I changed the import I added Routes
to it.我更改了向其添加
Routes
的导入。 I wrapped the Route
in Routes
.我将
Route
包裹在Routes
中。 But it keeps getting the same error.但它不断收到同样的错误。
I don't know if I should remove the Router
, but if I do it receives the error: Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')我不知道我是否应该删除
Router
,但如果我这样做,它会收到错误: Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
Route
syntax has also changed. Route
语法也发生了变化。 Now it works like that: <Route path="/dashboard" element={<Dashboard/>} />
.现在它是这样工作的:
<Route path="/dashboard" element={<Dashboard/>} />
。 You can view more in documentation您可以在文档中查看更多信息
You are importing the BrowserRouter
as Routes
, and then importing the low-level Router
.您将
BrowserRouter
导入为Routes
,然后导入低级Router
。 You are still missing the real Routes
component wrapping the routes.您仍然缺少包装路线的真正
Routes
组件。
Fix the imports and then fix the route API/syntax.修复导入,然后修复路由 API/语法。
Example:例子:
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>
);
}
}
You can also review the Upgrading from v5 migration/upgrade guide for the other breaking changes from RRDv5 to RRDv6.您还可以查看从 v5迁移/升级指南升级以了解从 RRDv5 到 RRDv6 的其他重大更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.