配置React Router报错：Objects are not valid as a React child问题排查

错误根源 #

你误用了createRoutesFromElements的参数类型——这个函数专门用来解析JSX格式的<Route>标签，但你直接传入了普通的路由配置对象，导致React将该对象当作React子元素尝试渲染，从而触发"Objects are not valid as a React child"错误。

同时，你的App组件没有设置子路由的渲染出口，即便路由配置修复，子组件也无法替换固定的ProjectDashboard。

解决方案一：改用createBrowserRouter（推荐写法） #

直接用createBrowserRouter接收路由配置对象，这是React Router v6更简洁直观的用法：

修正Main.jsx #

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import ErrorPage from './ErrorPage';
import MyTasksView from './MyTasksView';
import ReviewTasks from './ReviewTasks';
import MyApplications from './MyApplications';
import PeerReviews from './PeerReviews';
import ReviewApplication from './ReviewApplication';
import ProjectDashboard from './ProjectDashboard';

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 /> },
      { index: true, element: <ProjectDashboard /> }
    ]
  }
]);

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

修正App.jsx #

在App组件中用<Outlet />替换固定的ProjectDashboard，<Outlet />是React Router专门用来渲染当前匹配的子路由元素的容器：

import { Outlet } from 'react-router-dom';
import NavMenu from './NavMenu';

function App() {
  return (
    <>
      <NavMenu />
      <Outlet /> {/* 这里会随路由切换自动渲染对应子组件 */}
    </>
  );
}

export default App;

解决方案二：修正createRoutesFromElements的用法 #

如果坚持使用createRoutesFromElements，需要将路由配置写成JSX格式的<Route>嵌套结构：

修正Main.jsx #

import { createRoutesFromElements, Route, RouterProvider, createBrowserRouter } from 'react-router-dom';
// 其他导入同上

const routes = 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 index element={<ProjectDashboard />} />
  </Route>
);

const router = createBrowserRouter(routes);

// 渲染部分与方案一一致

App.jsx的修改与方案一相同，替换为<Outlet /> #

额外注意事项 #

• 子路由的path无需添加开头的/，会自动继承父路由的路径
• 添加index: true的子路由后，访问根路径/时会默认渲染ProjectDashboard，保留原有页面结构
• 确保所有组件的导入路径正确，避免出现组件找不到的报错

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