React-Router v6报错：[AppRoutes]不是<Route>组件的解决问询

错误原因 #

createRoutesFromElements 要求直接传入 <Route> 或 <React.Fragment> 作为子元素，你使用的自定义组件 <AppRoutes /> 不属于合法的路由子组件类型，因此触发该错误。

解决方案 #

移除自定义的AppRoutes组件，将路由结构直接写入createRoutesFromElements，同时把根路径的条件渲染逻辑封装为独立组件来使用useAuth钩子。

修改后的完整代码 #

import {
  Route,
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";
import Root from "./src/routes/root";
import SignIn from "./src/routes/sign-in";
import SignUp from "./src/routes/sign-up";
import Dashboard from "./src/routes/dashboard";
import { HomeLayout } from "./src/components/HomeLayout";
import { AuthLayout } from "./src/components/AuthLayout";
import { ProtectedLayout } from "./src/components/ProtectedLayout";
import ProfilePage from "./src/routes/profile";
import { useAuth } from "./src/hook/useAuth";

// 封装根路径的条件渲染逻辑
const HomePage = () => {
  const { isAuthenticated } = useAuth();
  return isAuthenticated ? <Dashboard /> : <Root />;
};

export const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<AuthLayout />}>
      <Route element={<HomeLayout />}>
        <Route path="/" element={<HomePage />} />
        <Route path="/sign-in" element={<SignIn />} />
        <Route path="/sign-up" element={<SignUp />} />
      </Route>

      <Route path="/user" element={<ProtectedLayout />}>
        <Route path="profile" element={<ProfilePage />} />
      </Route>
    </Route>
  )
);

关键说明 #

1. 移除AppRoutes组件：直接在createRoutesFromElements中编写路由结构，符合React Router v6的配置规范。
2. 条件渲染封装：将根路径的认证判断逻辑抽成HomePage组件，确保useAuth钩子在React组件内部调用（钩子只能在组件或自定义钩子中使用）。
3. 保留原有布局结构：维持了你原本的布局嵌套关系（AuthLayout -> HomeLayout/ProtectedLayout），不改变业务逻辑。

内容的提问来源于stack exchange，提问作者Châu Đặng