React Router v6 中自定义路由组件的正确用法与嵌套路由结构详解-js教程-PHP中文网

React Router v6 中自定义路由组件的正确用法与嵌套路由结构详解

在 React Router v6 中，createRoutesFromElements 要求其子元素必须是或，而不能是普通函数组件（如 AppRoutes）。解决方法是将逻辑封装进内部，并确保所有均为直接子元素。

在 react router v6 中，`createroutesfromelements` 要求其子元素必须是 `` 或 ``，而不能是普通函数组件（如 `approutes`）。解决方法是将逻辑封装进 `` 内部，并确保所有 `` 均为直接子元素。

React Router v6 的路由配置强调声明式、扁平化、类型安全的设计原则。你遇到的错误 "[AppRoutes] is not a <route> component"</route> 正是源于对 createRoutesFromElements 使用方式的误解：它不接受任意 JSX 组件作为子元素，只接受原生 <route></route>（或 <fragment></fragment>），且 <route></route> 必须是 createRoutesFromElements 的直接子节点。

✅ 正确做法：在 `AppRoutes` 内部使用 `<routes></routes>`，而非将其作为 `<route></route>` 渲染

AppRoutes 本身是一个UI 组件，用于组织条件性路由逻辑（例如根据 isAuthenticated 切换首页），但它不能替代 <route></route> 的语义角色。你需要将它改造成一个包裹 <routes></routes> 的渲染函数，并确保所有 <route></route> 结构最终被 createRoutesFromElements 直接消费。

以下是修正后的完整实现：

Orderly Sdk React Hooks

Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。

下载

// App.jsx
import {
  Route,
  createBrowserRouter,
  createRoutesFromElements,
  Routes, // ✅ 必须显式导入
} 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";

// ✅ AppRoutes 现在是一个返回 <routes> 的组件（非路由节点，仅逻辑容器）
const AppRoutes = () => {
  const { isAuthenticated } = useAuth();

  return (
    <routes>
      {/* 公共布局：AuthLayout 包裹所有路由 */}
      <route element="{<AuthLayout"></route>}>
        {/* 主页及认证相关路由（统一使用 HomeLayout） */}
        <route element="{<HomeLayout"></route>}>
          <route path="/" element="{isAuthenticated"></route> : <root></root>} 
          />
          <route path="/sign-in" element="{<SignIn"></route>} />
          <route path="/sign-up" element="{<SignUp"></route>} />
        

        {/* 受保护路由：需登录后访问 */}
        <route path="/user" element="{<ProtectedLayout"></route>}
        >
          <route path="profile" element="{<ProfilePage"></route>} />
        
      
    </routes>
  );
};

// ✅ createRoutesFromElements 的参数必须是 <route> 树 —— 所以我们直接传入 <approutes></approutes> 作为唯一子元素（它内部已含 <routes> 和合法 <route>）
export const router = createBrowserRouter(
  createRoutesFromElements(
    <route path="*" element="{<AppRoutes"></route>} /> // ✅ 合法：AppRoutes 是 Route 的 element，不是子节点
  )
);</route></routes></route></routes>

⚠️ 关键注意事项

<routes></routes> 不能出现在 createRoutesFromElements 的顶层子树中：createRoutesFromElements 只解析 Route，不解析 Routes；因此 <routes></routes> 必须放在某个 <route element="{...}"></route> 的渲染内容里（如本例中的 AppRoutes 函数体内）。
避免嵌套 <route></route> 时丢失 element 或 index 属性：v6 中，父 Route 若无 element，则无法渲染子路由；空路径父路由（如 <route path="/user"></route>）必须提供 element 才能承载子路由。
useAuth 需确保在路由上下文中可用：useAuth 应基于 React.Context 实现，且 AppRoutes 需位于 RouterProvider 内部（通常在 main.jsx 或 index.js 中完成挂载）。
动态判断应尽量轻量：isAuthenticated ? <dashboard></dashboard> : <root></root> 是可接受的内联条件渲染；若逻辑复杂，建议提取为独立组件或使用 loader + defer（配合服务端数据预取）。

✅ 最终效果

访问 /：自动根据登录状态显示 <dashboard></dashboard> 或 <root></root>；
/sign-in / /sign-up：始终在 AuthLayout + HomeLayout 下展示；
/user/profile：仅当用户已登录时可通过 ProtectedLayout 访问，否则应重定向（需在 ProtectedLayout 内实现守卫逻辑）。