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

Question

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

错误：[Home] 不是路线组件。路由的所有子组件必须是路由或 <React.Fragment>

代码如下

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;

Answer 1

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

<Route>这个改变是必要的，因为react-router 6为嵌套路由保留了 child 属性。

迁移到 v6

Answer 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 - 升级到 V6

所以，你可以使用V6语法来解决这个问题。

Answer 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