错误：[EditPage] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment> [重复]答案

【问题标题】：Error: [EditPage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> [duplicate]错误：[EditPage] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment> [重复]
【发布时间】：2022-01-01 06:47:54
【问题描述】：

我正在尝试用 react 来制作我的简单 webapp。我刚刚了解了反应路由器，我正在使用 react-router-dom。我只希望当我在 serchbar 中写入页面时，它会返回该页面，但会引发一些错误。错误如下：

Error: [EditPage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

我使用的代码如下：

App.js：

import RouterSetup from './pages/index';

function App() {
  return (
    <>
      <RouterSetup /> 
    </>
  );
}

export default App;

index.js（App.js中导入的文件）：

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">
                    <EditorPage />
                </Route>

                <Route path="/login">
                    <Login />
                </Route>
            </Routes>
            </Fragment> 
        </Router>
    );
}


export default RouterSetup;

所有其他文件都是正常工作的组件，没有错误，因为我对它们进行了测试。我读了一堆其他stackoverflow.com的答案，有人写信做我在主页路线中所做的事情，而不是相反，就像其他两条路线一样，但它无论如何都不起作用。我不知道我是否遗漏了什么，或者我正在以不正确的方式进行操作。我也重新阅读了文档，但我没有找到任何东西。有人可以帮我吗？ react-router-dom 的版本是 6.0.2。谢谢

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

我认为，使用 RR 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">
                    <EditorPage />
                </Route>

                <Route path="login">
                    <Login />
                </Route>
            </Routes>
            </Fragment> 
        </Router>
    );
}


export default RouterSetup;

【讨论】：