Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendereddirectly

报错信息：

Error: A < Route > is only ever to be used as the child of < Routes > element, never rendereddirectly.Please wrap your < Route> in a < Routes >

原因：

react-router-dom版本 v5 和 v6 改版，使用时候有区别

V6 版本：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import routers from './routers';const App = () => {return (<Router><Routes> // 不是老版本的：Switch{routers.map((item, index) => {return (<Routekey={index}exactpath={item.path}element={<item.component />} // 不是老版本的：component 或 render/>);})}</Routes></Router>);
};export default App;

V5 版本：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import routers from './routers';const App = () => {return (<Router><Switch>{routers.map((item, index) => {return (<Routekey={index}exactpath={item.path}component={<item.component />}//或：//render={() => {//  return <item.component/>;//}}/>);})}</Switch></Router>);
};export default App;

routers 文件夹 index.js

import Inbox from '../views/Inbox';
import About from '../views/About'const routers = [{title: 'About',path: '/',component: About,},{title: 'Inbox',path: '/inbox',component: Inbox,},
];export default routers;

解决办法：

第一种：
使用最新 V6 的语法规则 – 如上图改造

第二种：
更改react-router-dom的版本，改为 V5的

// 命令：如 5.2.0
//npm方式：npm i react-router-dom@5.2.0//cnpm方式：cnpm i react-router-dom@5.2.0//yarn方式：yarn add react-router-dom@5.2.0

到此，结束~~

欢迎有兴趣的前端同学一起讨论交流：152693086

Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendereddirectly相关推荐

关于react-router-dom 6.0.1的更新基本写法解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞
文章目录前言一.先准备好要切换的组件二.在 V5 版本则是这样使用 v5版本:`Router`直接包裹着`Route组件` 三.在V6版本则是这样使用 v6版本:`Route`需要先被`Rout ...
关于react-router-dom 6.0.1的基础写法解决Error A ＜Route＞ is only ever to be used as the child of ＜Routes＞
在新建react项目中使用react-router-dom 6.0.1版本难免会遇到以下报错 Error: A <Route> is only ever to be used as th ...
关于react-router-dom 6.0.1的基础写法解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞
在新建react项目中使用react-router-dom 6.0.1版本难免会遇到以下报错 Error: A <Route> is only ever to be used as th ...
index.tsx:19 Uncaught Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, nev
今天做练习react路由出现错误,index.tsx:19 Uncaught Error: A is only ever to be used as the child of element, nev ...
Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendered directly.
错误示例 index.jsx import React from "react"; import ReactDom from "react-dom";impor ...
react-router-dom ^6.0.2使用过程中报错 Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞
因为react-router-dom更新的之后路由使用时做了一写改变废话不多说,上代码旧版本: import React from 'react' import ReactDOM from 're ...
Uncaught Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendered d
2021年写法 2022年写法
【无标题】A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendered directly. Pl
版本问题的语法错误:可以选择npm i react-router-dom@5.2.0回到5版本,或者直接用6版本语法 A <Route> is only ever to be used a ...
Reacte路由报错：A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendered direct
由于react-router-dom更新到6版本以后,有一些写法开始与5不同 1.包裹方式不同 A <Route> is only ever to be used as the child ...

Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendereddirectly

报错信息：

原因：

解决办法：

Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendereddirectly相关推荐

最新文章

热门文章