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

IT技术 reactjs
2021-05-19 12:55:16

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

错误：[Home] 不是路由组件。Routes 的所有子组件都必须是 Route 或 <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;
4个回答

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

迁移到 v6

发生此错误是因为 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

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

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

修复了同一Route. 将多个组件包裹在<>和</>标签中。

<Route exact path="/" element={<><AddTodo addTodo={addTodo} /><Todos todos={todos} onDelete={onDelete} /></>} />
其它你可能感兴趣的问题
上一篇适用于PLA的可打磨底漆？ 下一篇在 Prusa i3 MK3 上，0.05 毫米的打印质量比 0.10 毫米层高的打印质量差