React Router包裹时App组件无法加载单独使用可正常渲染问题求助

开发者阿泽

2026-9-27

问题原因及解决方案

你遇到的问题由react-router-dom的语法使用错误、版本不兼容两点导致，按以下步骤排查修复即可：

第一步：优先确认版本号

在项目根目录执行如下命令确认当前安装的react-router-dom版本：

npm list react-router-dom
# 如用yarn则执行 yarn list react-router-dom

第二步：对应版本修正代码

情况1：版本为v6.x（目前主流版本）

v6相比v5做了大量语法调整，原有写法完全不兼容：

所有<Route>必须包裹在<Routes>组件内
渲染组件必须通过element属性传入，不支持直接写为Route的子节点
直接使用<BrowserRouter>替代底层无封装的<Router>，无需手动传入history

修正后的入口代码如下：

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Router>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});

情况2：版本为v5.x

底层<Router>需要手动传入history属性才能运行，直接替换为封装好的<BrowserRouter>即可
匹配根路径需要加exact属性避免路由匹配优先级问题

修正后的入口代码如下：

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { BrowserRouter as Router, Route } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Router>
      <Route exact path="/">
        <App />
      </Route>
    </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});