设置 React Router 时卡住：错误：对象作为 React 子项无效（找到：带有键 {path、element、errorElement、children} 的对象）

Question

我是 React 开发的新手，正在使用 Vite 和 React 创建 Ruby/Rails API 的前端。我正在设置 React Router 来处理路由，并在尝试设置 createBrowserRouter 时收到以下错误：

“错误：对象作为 React 子对象无效（发现：带有键 {path、element、errorElement、children} 的对象）。”

我当前的设置如下：

Main.jsx

const router = createRoutesFromElements(
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
    {
      path: "/tasks",
      element: <MyTasksView />
    }, 
    {
      path: "/reviewtasks",
      element: <ReviewTasks />
    }, 
    {
      path: "/myapplications",
      element: <MyApplications />
    }, 
    {
      path: "/peerreviews",
      element: <PeerReviews />
    }, 
    {
      path: "/reviewapplications",
      element: <ReviewApplication />
    }]
  }
)

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <RouterProvider router={router} />
   </StrictMode>,
)

应用程序.jsx

function App() {
  return (

      <>
      <NavMenu />
      <ProjectDashboard />
      </>
  

)}

export default App

这是我的上下文文件夹结构的屏幕截图：

“NavMenu”组件是一个基本的 Material UI 抽屉，其中包含用于导航的 ListItem 元素以及用于显示应用程序名称和帐户图标的 Appbar。 “ProjectDashboard”组件仅呈现一个简单的 MUI 表，在抽屉旁边和应用栏下方显示一些基本数据。

我试图在 createBrowserRouter 中完成的任务是在到达新路线时用相应的组件替换“ProjectDashboard”组件。我在这里根据 React Router 文档添加了“children”对象：https://reactrouter.com/en/main/routers/router-provider

但似乎仍然遇到这个错误，而且我一生都无法解决这个问题。希望这足够详细，可以让某人提供一些清晰度和/或希望帮助其他人在设置 React Router 时遇到困难。

Answer 1

createRoutesFromElements

（和

createRoutesFromChildren

）只是一个方便的实用函数，您可以在其中传递 JSX 并将其转换为路由器配置中使用的

RouteObject[]

类型。

createRoutesFromElements

是一个帮助器，用于创建路线对象

<Route>

元素。如果您希望将路线创建为 JSX 而不是对象。

要创建路由器，您需要使用

createXRouter

功能之一。有关详细信息，请参阅选择路由器。

看来您只是使用了错误的函数来创建路由器。

创建

BrowserRouter

的示例：

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter(
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
    {
      path: "/tasks",
      element: <MyTasksView />
    }, 
    {
      path: "/reviewtasks",
      element: <ReviewTasks />
    }, 
    {
      path: "/myapplications",
      element: <MyApplications />
    }, 
    {
      path: "/peerreviews",
      element: <PeerReviews />
    }, 
    {
      path: "/reviewapplications",
      element: <ReviewApplication />
    }]
  }
)

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
);

要了解如何使用

createRoutesFromElements

，请参阅以下内容：

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />} errorElement={<ErrorPage />}>
      <Route path="tasks" element={<MyTasksView />} />
      <Route path="reviewtasks" element={<ReviewTasks />} />
      <Route path="myapplications" element={<MyApplications />} />
      <Route path="peerreviews" element={<PeerReviews />} />
      <Route path="reviewapplications" element={<ReviewApplication />} />
    </Route>
  ),
)

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
);