React路由报错：无法嵌套渲染<Router>的问题排查

错误根源 #

报错Uncaught Error: You cannot render a <Router> inside another <Router>的核心原因是组件命名冲突引发的递归渲染：

• 你自定义了名为Routes的组件，但在组件内部使用的<Routes>标签并未从react-router-dom导入对应组件
• 这导致<Routes>实际引用了你自己定义的Routes组件，形成递归调用，每次递归都会创建新的<Router>，最终触发多Router嵌套的错误

同时你的路由写法存在版本适配问题：若使用react-router-dom v5，需用<Switch>而非<Routes>，且Route的component属性应传入组件引用而非实例；若使用v6版本，则需用element属性传入组件实例。

修复方案 #

适配react-router-dom v5 #

修改路由文件夹下的index.js：

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";

import Store from '../pages/store';
import About from '../pages/About';
import NotFound from '../pages/NotFound';
import Cart from "../pages/cart";

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route exact path="/" component={Store}/>
        <Route path="/cart" component={Cart} />
        <Route path="*" component={NotFound} />
      </Switch>
    </Router>
  );
}

export default Routes;

适配react-router-dom v6 #

如果项目使用v6版本，需调整写法并避免命名冲突：

import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route
} from "react-router-dom";

import Store from '../pages/store';
import About from '../pages/About';
import NotFound from '../pages/NotFound';
import Cart from "../pages/cart";

// 重命名自定义组件，避免与react-router-dom的Routes冲突
const AppRoutes = () => {
  return (
    <Router>
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/" element={<Store />}/>
        <Route path="/cart" element={<Cart />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default AppRoutes;

同时更新主index.js的导入：

import AppRoutes from './routes';
// ...
<AppRoutes />

注意事项 #

• 避免自定义组件名与第三方库导出的组件名重复，防止命名冲突
• 严格遵循对应react-router-dom版本的API规范，v5与v6的路由写法差异较大

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