React使用useRoutes报错页面无显示，请求技术协助

报错信息 #

routes.js:12 Uncaught TypeError: Cannot read properties of undefined (reading 'createElement')
at routes.js:12:17

问题排查与修复 #

1. routes.js 中 React 导入错误 #

React 是默认导出，不能用解构方式导入，错误的导入会导致 React 变量为 undefined，JSX 转换时无法调用 React.createElement。

修正后的 routes.js：

import React from "react";
import { Home } from './Home.jsx';
import { ErrorPage } from './ErrorPage.jsx';

export const routes = [
    {
        path:'/', 
        element:<Home />
    },
    { 
        path:'*',              
        element:<ErrorPage /> 
    }
];

2. Menu.jsx 重复嵌套 Router 且导出名称不匹配 #

App.jsx 已经在外层包裹了 Router，Menu 组件内再次嵌套 Router 会导致路由上下文冲突，useRoutes 无法正确获取路由信息；同时组件导出名称要和 App.jsx 的导入保持一致。

修正后的 Menu.jsx：

import React, { useState } from 'react';
import { Link } from "react-router-dom";
import { pages } from '../../data/pages';

export const Menu = () => {
    const [myPages, setMyPages] = useState(pages);
    const [pageToDisplay, setPageToDisplay] = useState("/");

    const displayPage = (page) => { 
        setPageToDisplay(page.url);
    }

    return (
        <div className="ui menu">
            {myPages.map((el) => {
                const { id, name, url } = el;
                return (
                    <Link to={url} key={id} className={`item ${pageToDisplay == url ? "active" : ""}`} onClick={() => displayPage({url})}>{name}</Link>
                );
            })}
        </div> 
    );
}

3. 其他文件验证 #

Index.jsx 和 App.jsx 逻辑本身无问题，确保 Home.jsx 和 ErrorPage.jsx 正确导出即可。

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