React Router V6报错：无法在<Router>内渲染另一个<Router>，求解决

问题描述 #

应用已用BrowserRouter包裹路由，但抛出错误：

Uncaught Error: You cannot render a inside another

全局搜索仅发现一处BrowserRouter，但报错依然存在，相关代码如下：

原App组件代码 #

import { BrowserRouter, Routes, Route, Router, Link } from "react-router-dom";
import Header from "./components/Header/Header";
import Features from "./components/body/Features/FeaturesGrid/FeaturesGrid";
import Artists from "./components/body/Artists/Artists";
import Fans from "./components/body/Fans/Fans";
import Groups from "./components/body/Groups/Groups";
import Footer from "./components/body/Footer/Footer";
import PPV from "./components/body/PPV/PPV";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Header />
      </nav>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/features" element={<Features />} />
        <Route path="/artists" element={<Artists />} />
        <Route path="/fans" element={<Fans />} />
        <Route path="/groups" element={<Groups />} />
        <Route path="/ppv" element={<PPV />} />
        {/* <Route path="/feed" element={<Feed />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

问题根源 #

核心问题是无限递归渲染：

• 根路由path="/"的element设置为<App />，意味着访问首页时会重新渲染整个App组件。
• 而App组件内部包含BrowserRouter，每一次递归渲染都会创建新的BrowserRouter，最终触发"Router嵌套"的报错。
• 另外，代码中导入了未使用的Router，属于冗余代码，容易造成混淆。

解决方案 #

1. 替换根路由的渲染内容 #

创建专门的Home组件承载首页内容，避免直接渲染App本身：

import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; // 移除未使用的Router导入
import Header from "./components/Header/Header";
import Features from "./components/body/Features/FeaturesGrid/FeaturesGrid";
import Artists from "./components/body/Artists/Artists";
import Fans from "./components/body/Fans/Fans";
import Groups from "./components/body/Groups/Groups";
import Footer from "./components/body/Footer/Footer";
import PPV from "./components/body/PPV/PPV";

// 定义首页组件
const Home = () => (
  <>
    <Header />
    {/* 此处添加首页专属内容 */}
    <Footer />
  </>
);

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} /> {/* 替换为Home组件 */}
        <Route path="/features" element={<Features />} />
        <Route path="/artists" element={<Artists />} />
        <Route path="/fans" element={<Fans />} />
        <Route path="/groups" element={<Groups />} />
        <Route path="/ppv" element={<PPV />} />
        {/* <Route path="/feed" element={<Feed />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

2. 额外修复 #

Header组件中<Link to="/fans">Fans</Link>/多了一个多余的斜杠，建议删除，避免链接文本显示异常：

// 原代码
<li>
  <Link to="/fans">Fans</Link>/
</li>

// 修复后
<li>
  <Link to="/fans">Fans</Link>
</li>

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