react-router-dom v6报错：[EditPage]不是<Route>组件如何解决

react-router-dom v6 对 <Routes> 下的组件结构有强制约束：

• <Routes> 的直接子节点只能是 <Route> 或 <React.Fragment>
• 单一路由对应的页面组件不能作为 <Route> 的子节点传入，必须统一通过 element 属性传递。你代码里 /edit、/login 两个路由直接把页面组件放在 <Route> 标签内部，不符合v6的语法要求，因此触发报错。

直接调整两个异常路由的写法即可，修改后的路由配置文件代码如下：

import React, {Fragment} from 'react';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
//pages
import Homepage from './HomePage';
import EditorPage from './EditPage';
import Login from './Login';

const RouterSetup = () => {
    return (
        <Router>
            <Fragment>
            <Routes>
                <Route path="/" element={<Homepage />} />
                <Route path="/edit" element={<EditorPage />} />
                <Route path="/login" element={<Login />} />
            </Routes>
            </Fragment> 
        </Router>
    );
}

export default RouterSetup;

如果按上述方法调整后还是出现同类错误，可依次排查：

• 检查所有 <Route> 标签是否正确闭合，没有遗留多余的子元素
• 删除本地 node_modules 文件夹、package-lock.json 或 yarn.lock 文件后重新安装依赖，避免依赖版本安装异常
• 确认项目内没有自定义命名为 Route 的组件，避免覆盖官方react-router-dom导出的Route组件

内容的提问来源于stack exchange，提问作者Matteo Possamai