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 (
            <Route
              key={index}
              exact
              path={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 (
            <Route
              key={index}
              exact
              path={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