react-router-dom升级到v6.02后提示[Home]不是<Route>组件如何解决？

报错产生原因 #

• react-router-dom v6 做了不兼容v5版本的语法调整，<Routes> 的直接子节点仅允许是 <Route> 或 <React.Fragment>，你当前的写法是把页面组件（Home、Login等）作为 <Route> 的直接子节点放在标签内部，不符合v6的语法要求
• v6 不再支持把组件放在 <Route> 标签内部作为子元素渲染，必须通过 element 属性传入要渲染的组件
• 额外说明：v6默认就是精确匹配路径，原来的 exact 属性已经废弃不需要再写

修复方法 #

修改<Routes> 内部的 <Route> 写法，将页面组件传入 element 属性即可，修复后完整代码如下：

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 path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/signup" element={<Signup />} />
          </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

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