MERN项目中react-router-dom加载空白页，多种方案尝试无效

AI 小北

2026-8-18

MERN项目路由白屏问题解决

问题详情

查了20多个同类问题，所有建议都解决不了，快烦死了！
在开发MERN全栈项目时，仅需为首页和Admin页面配置路由，但添加路由后页面始终白屏，控制台无任何错误提示。
已尝试过导入root、使用'as'语法，切换BrowserRouter/HashRouter/Router，以及components和elements两种属性写法，均无效。

依赖版本

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.1",

现有代码

Index.js

import Routing from "./Routing";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Routing />
  </React.StrictMode>
);

Routing.js

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import App from "./App";
import Admin from "./Admin";

function Routing() {
  <BrowserRouter>
    <Routes>
      <Route path="/" element={App} />
      <Route path="/admin" element={Admin} />
    </Routes>
  </BrowserRouter>;
}
export default Routing;

问题原因及修复

核心问题

Routing组件未返回JSX：函数组件必须显式返回要渲染的内容，当前代码仅写了JSX但没有return，默认返回undefined，导致页面无内容。
Route的element属性传入错误：react-router-dom v6中，element需要接收组件实例（即带尖括号的<App />），而非组件本身（App）。

修复后的Routing.js

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import App from "./App";
import Admin from "./Admin";

function Routing() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/admin" element={<Admin />} />
      </Routes>
    </BrowserRouter>
  );
}
export default Routing;