React Router引入后页面空白无报错，求排查指导

核心问题：组件未返回JSX #

你的RoutedApp函数组件没有返回任何JSX元素——函数内部的<Router>代码块仅被执行但未通过return语句返回，导致组件渲染结果为undefined，页面自然空白。控制台能打印日志是因为函数内的同步代码正常执行，但JSX从未被渲染到页面。

其他代码问题 #

1. 缺失组件导入：代码中使用了<IssueList />但未导入该组件，这会引发运行时错误，需补上import IssueList from './IssueList.jsx';。
2. action/loader属性误用：action和loader是React Router v6.4+数据路由的专属API，仅能配合createBrowserRouter和RouterProvider使用，无法直接在BrowserRouter下的Route组件上生效，因此你看不到对应的日志输出。
3. 组件命名不规范：noMatch作为函数组件，React要求组件名称必须以大写字母开头（否则会被识别为普通HTML标签），需改为NoMatch。

修复后的基础路由代码示例 #

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import IssueEdit from './IssueEdit.jsx';
// 补上缺失的IssueList组件导入
import IssueList from './IssueList.jsx';

const contentNode = document.getElementById('contents');

// 修正组件命名为大写开头
const NoMatch = () => <p>Page not found.</p>;

const RoutedApp = () => {
    console.log("Reached routed app");
    // 使用return返回JSX结构
    return (
        <Router>
            <Routes>
                {/* 移除不生效的action/loader属性 */}
                <Route path="/" element={<IssueList />} />
                <Route path="/issueEdit" element={<IssueEdit />} />
                <Route path="*" element={<NoMatch />} />
            </Routes>
        </Router>
    );
};

ReactDOM.render(<RoutedApp />, contentNode);

if(module.hot){
    module.hot.accept();
}

若需使用action/loader（数据路由方案） #

如果确实需要用到action和loader功能，需改用React Router的数据路由模式，示例如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import IssueEdit from './IssueEdit.jsx';
import IssueList from './IssueList.jsx';

const NoMatch = () => <p>Page not found.</p>;

// 定义带数据能力的路由配置
const router = createBrowserRouter([
    {
        path: "/",
        element: <IssueList />,
        loader: () => {
            console.log("Loader");
            // 此处可返回从API获取的数据
            return null;
        },
        action: () => {
            console.log("action");
            // 此处处理表单提交等动作逻辑
            return null;
        }
    },
    {
        path: "/issueEdit",
        element: <IssueEdit />
    },
    {
        path: "*",
        element: <NoMatch />
    }
]);

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

if(module.hot){
    module.hot.accept();
}

依赖版本检查 #

你的package.json依赖版本无明显冲突：

• react和react-dom均为18.3.1，与react-router-dom6.26.0完全兼容
• webpack、babel等开发依赖版本适配当前React生态，无需额外降级或升级

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