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

【问题标题】：Error: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>错误：[Home] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>
【发布时间】：2021-11-15 14:13:48
【问题描述】：

朋友们好，我正在尝试创建自己的应用程序，但在将 react-router-dom 更新到 6.02 后遇到问题我收到此错误

错误：[Home] 不是 Route 组件。的所有子组件路由必须是 Route 或

代码如下

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar/Navbar";
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Signup from "./pages/signup/Signup";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
          <Navbar />
          <Routes>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/signup">
              <Signup />
            </Route>
          </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

【问题讨论】：

您需要包含 Home 组件代码...否则我们只是在猜测
只是一个渲染一个div的函数组件
你试过用反应片段包围返回值吗？就像错误说的那样
即便如此您也需要提供所有相关代码。它是 stackoverflow 中的一项策略，以提供完全可重现的示例
Tiko 给出了正确答案

标签： reactjs

【解决方案1】：

<Route path="/" element={<Home />} />

Migrating to v6

【讨论】：

您能否扩展此答案并解释为什么需要该代码而不是其他代码？

【解决方案2】：

React 路由器包相对于版本有一些代码更改。

// React router v4 or v5
<Route path="/" component={Home} /> 

// React router v5.1
<Route exact path="/">
    <Home />
</Route>

// React router v6
<Route path="/" element={<Home />} />

更多：React Router - Upgrading to V6

因此，您可以使用 V6 语法来解决此问题。

【讨论】：

【解决方案3】：

这个错误是由于 react-router-dom 库的新升级造成的。

这是您问题的解决方案。

    import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

        function App() {
      return (
  <div className="App">
    <Router>
        <Navbar />
        <Routes>
        <Route exact path='/' element={<Home />} />
        <Route path='/register' element={<Signup />} />
        <Route path='/Login' element={<Login />} />
        </Routes>
    </Router>
  </div>
       
      );
    }
    
    export default App;

这是这个版本的解决方案 "react-router-dom": "^6.0.2",

注意：- 在react-router-dom 的新版本中还有一些比这更多的功能。 https://reactrouter.com/docs/en/v6

【讨论】：

【解决方案4】：

我也有同样的问题，如果你使用 v6 尽量不要对路由使用关闭标签，而是使用元素属性来定义你的组件，例如 Home 路由你应该这样做

<Route exact path="/" element={<Home />} />

【讨论】：

【解决方案5】：

已修复同一 Route 下的多个组件。将多个组件包裹在 <> 和 </> 标签内。

<Route exact path="/" element={<><AddTodo addTodo={addTodo} /><Todos todos={todos} onDelete={onDelete} /></>} />

【讨论】：

【解决方案6】：

未捕获的错误：[Home] 不是组件。的所有子组件必须是 a 或 <React.Fragment> 解决方案

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route exact path="/" element={<Home />} />
        </Routes>
      </Router>
    </>
  );
}

【讨论】：