react-router-dom中Routes与Route使用报错：[Login]不是有效组件

你遇到的错误核心是react-router-dom v6 彻底改变了 <Route> 组件的用法——它不再支持将组件直接作为 <Route> 的子元素，必须通过 element 属性来指定要渲染的内容。你的代码里把 <Login>、<Homepage> 直接嵌套在 <Route> 标签内部，这是 v5 及更早版本的写法，v6 不兼容这种方式，所以触发了错误提示。

把所有 <Route> 的子组件都移到 element 属性中，根路径的条件渲染逻辑也可以直接写在 element 的表达式里：

import './App.css';
import Homepage from './components/Homepage/Homepage';
import Login from './components/Login/Login';
import Register from './components/Register/Register';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useState } from 'react';

export const App = () => {
  const [user, setLoginUser] = useState({});
  return (
    <BrowserRouter>
      <div className='App'>
        <Routes>
          <Route 
            path='/' 
            element={
              // 用可选链简化判断，避免空值报错
              user?._id ? <Homepage setLoginUser={setLoginUser} /> : <Login setLoginUser={setLoginUser}/>
            } 
          />
          <Route path='/login' element={<Login setLoginUser={setLoginUser}/>} />
          <Route path='/register' element={<Register />} />
        </Routes>
      </div>
   </BrowserRouter>
  );
};

• v6 中 <Route> 的 exact 属性已经被移除，因为默认就会精确匹配路径，不需要手动添加
• 使用 user?._id 代替 user && user._id 是更安全的写法，即使 user 是 null 或 undefined 也不会报错

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