Stuck while setting up React Router: Error: Objects are not valid as a React child (found: object with keys {path, element, errorElement, children})

Question

I am creating a frontend for a Ruby/Rails API using Vite with React. I'm in the process of setting up React Router to handling routing and am getting the following error while attempting to setup the createBrowserRouter:

"Error: Objects are not valid as a React child (found: object with keys {path, element, errorElement, children})."

My current setup is as follows:

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>,
)

App.jsx

function App() {
  return (

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

)}

export default App

Here is a screenshot of my folder structure for context:

The "NavMenu" component is a basic Material UI Drawer that contains the ListItem elements for navigation and an Appbar to display the application name and account icon. The "ProjectDashboard" component just renders a simple MUI Table displaying some basic data beside the Drawer and underneath the Appbar.

What I'm trying to accomplish in my createBrowserRouter is replacing the "ProjectDashboard" component with a corresponding component when a new route is reached. I've added the "children" object based on the React Router docs here: https://reactrouter.com/en/main/routers/router-provider

But still appear to be getting this error and cannot figure this out for the life of me. Hopefully this will be detailed enough for someone to provide some clarity and/or hopefully help out anyone else stuck while setting up React Router.

Answer 1

createRoutesFromElements (and createRoutesFromChildren) is only a convenience utility function where you can pass JSX and it converts it to the RouteObject[] type used in the router configuration.

createRoutesFromElements is a helper that creates route objects from <Route> elements. It's useful if you prefer to create your routes as JSX instead of objects.

To create a router you need to use one of the createXRouter functions. See Picking a Router for details.

It appears you simply used the wrong function to create your router.

Example creating a 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>,
);

For completion how the createRoutesFromElements is used see the following:

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>,
);