Next.js集成React Router DOM出现路由嵌套错误求助

问题根源 #

你的Home组件存在两处致命问题导致报错：

1. 组件内部嵌套了<BrowserRouter>，同时在路由配置里把<Home />作为根路径的渲染元素，触发无限递归渲染——每次渲染Home都会重新创建一个新的BrowserRouter实例，最终导致应用中出现多个Router，触发冲突。
2. Next.js App Router架构下，全局只需要一个Router实例，不应在页面组件内重复包裹。

修复步骤 #

1. 全局统一配置BrowserRouter #

将BrowserRouter移到根布局文件（app/layout.tsx）中，确保整个应用只有一个Router实例：

"use client";
import { BrowserRouter } from "react-router-dom";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <BrowserRouter>{children}</BrowserRouter>
      </body>
    </html>
  );
}

2. 修改Home组件，移除内部Router并避免递归 #

删除Home组件内的BrowserRouter，同时拆分出独立的首页内容组件，避免路由渲染自身导致的递归：

"use client";
import React from 'react';
import { Route, Routes } from "react-router-dom";
import Main from '@/components/main/Main';
import Sidebar from "@/components/sidebar/Sidebar";
import { Blog } from "@/pages/blog/Blog";

// 独立的首页内容组件
const HomeContent = () => {
  return <div>这里是首页内容</div>;
};

export default function Home() {
  return (
    <>
      <Sidebar />
      <Main>
        <Routes>
          <Route path="/" element={<HomeContent />} />
          <Route path="/blog/[id]" element={<Blog />} />
        </Routes>
      </Main>
    </>
  )
}

额外说明 #

• 在Next.js中使用React Router DOM时，Router实例必须全局唯一，通常放在根布局中最外层。
• 路由配置中永远不要将当前组件作为路由元素，这会引发无限循环渲染，不仅会导致Router冲突，还会耗尽浏览器内存。

内容的提问来源于stack exchange，提问作者Toavina Maria Randrianimanana