本文详解因嵌套多个 router 实例导致路由跳转失效的根本原因，并提供基于 `createbrowserrouter` 和布局路由（layout route）的正确解决方案，确保导航无刷新、状态不重置。
在使用 react-router-dom@6.4+ 时，一个常见却隐蔽的错误是：在应用中意外创建了多个独立的 Router 实例。正如你在代码中所见，App 组件使用了 createBrowserRouter + RouterProvider，这是现代推荐的路由配置方式；但与此同时，NavBar 组件内部又包裹了一层
✅ 正确做法：统一 Router，用 Layout Route 提升共享 UI
你需要移除 NavBar 内部的 BrowserRouter，将其改为纯展示组件，并通过 布局路由（Layout Route） 将 NavBar 与页面内容解耦，让所有导航都发生在同一个 Router 上：
1. 简化 NavBar（移除 Router）
// src/components/NavBar.tsx
import { Link } from "react-router-dom";
function NavBar() {
return (
<nav className="nav">
<Link to="/">Home</Link>
<ul>
<li><Link to="/history">History</Link></li>
</ul>
</nav>
);
}
export default NavBar;⚠️ 注意：不再导入 BrowserRouter、Route 或 Routes —— 它现在只是一个无状态的 UI 组件。
2. 创建布局组件，整合导航与内容出口
// src/App.tsx
import {
createBrowserRouter,
RouterProvider,
Outlet // ← 关键：占位符，用于渲染子路由元素
} from "react-router-dom";
import NavBar from "./components/NavBar";
import HistoryPage from "./pages/HistoryPage";
import MainPage from "./pages/MainPage";
// 布局组件：复用 NavBar，通过 <Outlet /> 插入当前匹配的页面
const AppLayout = () => (
<>
<NavBar />
<main id="main-content">
<Outlet /> {/* ← 此处将被 / 或 /history 对应的组件替换 */}
</main>
</>
);
// 配置嵌套路由：所有路径均挂载在 AppLayout 下
const router = createBrowserRouter([
{
element: <AppLayout />,
children: [
{ path: "/", element: <MainPage /> },
{ path: "/history", element: <HistoryPage /> }
]
}
]);
function App() {
return <RouterProvider router={router} />;
}
export default App;✅ 额外收益：保持组件状态不丢失（如随机数据）
由于整个导航过程都在单个 Router 内完成（无页面刷新、无新 React 树重建），MainPage 中通过自定义 Hook（如 useRandomObject）获取的 randomObject 将持续保留在内存中。当你从 /history 返回 / 时，MainPage 实例未被销毁，其 useState、useEffect 和自定义 Hook 的缓存状态均保留，从而避免重复请求数据库或生成新随机项。
? 验证与调试建议
- 检查浏览器开发者工具 → Network 标签：切换路由时不应触发 HTML 文档重新加载；
- 在 MainPage 中添加 useEffect(() => { console.log("MainPage mounted"); }, [])，确认仅首次加载时打印；
- 若仍异常，请全局搜索项目中是否还有其他 BrowserRouter 或 RouterProvider 实例（尤其检查 index.tsx 是否重复包裹）。
遵循此结构，你将获得真正 SPA（单页应用）体验：URL 实时同步、视图平滑切换、状态持久稳定。
