React Router 6路由配置报错求助（React18+Create React App环境）

核心问题分析 #

你遇到的报错是React Router 6.4+版本的强制要求：使用createBrowserRouter创建的路由树必须包含错误处理机制（要么配置errorElement，要么用ErrorBoundary包裹路由）。另外你的MainNavigation.js存在代码错误，会导致循环引用问题，进一步加剧报错。

分步解决 #

1. 新增错误页面并配置路由errorElement #

首先创建一个错误页面组件（比如src/pages/Error.js）：

function ErrorPage() {
  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>Oops! 页面加载出错了</h1>
      <p>请检查路由配置或页面组件是否存在问题</p>
    </div>
  );
}

export default ErrorPage;

然后修改App.js，导入错误页面并在根路由中添加errorElement配置：

import {createBrowserRouter, RouterProvider} from "react-router-dom";
import RootLayout from "./pages/Root";
import HomePage from "./pages/Home";
import MatchingPage from "./pages/Matching";
import RankingListPage from "./pages/RankingList";
import ShoppingPage from "./pages/Shopping";
import PersonalCenterPage from "./pages/PersonalCenter";
import ErrorPage from "./pages/Error"; // 新增导入
import React from 'react';

const router = createBrowserRouter([
    {
        path:'/',
        element:<RootLayout/>,
        errorElement: <ErrorPage/>, // 新增错误处理配置
        children:[
            {path:'/',element:<HomePage/>},
            {path:'/matching',element:<MatchingPage/>},
            {path:'/rankinglist',element:<RankingListPage/>},
            {path:'/shopping',element:<ShoppingPage/>},
            {path:'/personalcenter',element:<PersonalCenterPage/>},
        ]
    },
]);

function App() {
    return <RouterProvider router={router}/>
}
export default App;

2. 修复MainNavigation.js的代码错误 #

你的MainNavigation.js完全写错了，重复了RootLayout的逻辑还导入自身，导致循环引用。将其修改为正确的导航组件：

import { Link } from 'react-router-dom';

function MainNavigation() {
  return (
    <nav style={{ background: '#f0f0f0', padding: '1rem' }}>
      <ul style={{ listStyle: 'none', display: 'flex', gap: '2rem', margin: 0, padding: 0 }}>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/matching">匹配</Link></li>
        <li><Link to="/rankinglist">排行榜</Link></li>
        <li><Link to="/shopping">商城</Link></li>
        <li><Link to="/personalcenter">个人中心</Link></li>
      </ul>
    </nav>
  );
}

export default MainNavigation;

验证修复 #

完成上述修改后，重新启动项目：

npm start

此时路由应该能正常工作，错误页面会在路由加载失败时显示，同时导航组件也能正确渲染并跳转。

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