本文详解如何修复 navbar 点击后 url 变化但组件不渲染的问题，核心在于避免嵌套多个 router 实例，并通过 layout 路由 + outlet 实现真正的客户端导航，确保状态（如随机数据）在页面切换中持久保留。
在使用 react-router-dom@6 时，一个常见却极易被忽视的错误是：在应用中意外创建了多个独立的 Router 实例。你当前的代码正是如此——App 中使用 createBrowserRouter 和 RouterProvider 定义了主路由系统，而 NavBar 组件内部又包裹了一个 BrowserRouter。这两个 Router 彼此完全隔离：NavBar 中的 触发的是子 Router 的导航事件，但该 Router 并未定义任何路由规则，也未挂载任何 Routes 或 Outlet，因此无法渲染目标组件；与此同时，主 Router 对该点击行为毫无感知，自然不会响应。
要实现真正的无刷新导航（即 SPA 核心体验），所有导航链接必须与路由配置处于同一个 Router 上下文中。正确做法是移除 NavBar 内部的 BrowserRouter，将其改造为纯展示组件，并通过 Layout Route（布局路由） 统一管理共享 UI（如导航栏）与动态内容区域。
以下是重构后的标准实践：
✅ 正确结构：单 Router + Layout + Outlet
首先，精简 NavBar 组件（不再包裹 Router）：
// src/components/NavBar.tsx
import { Link } from "react-router-dom";
function NavBar() {
return (
<nav className="nav">
<Link to="/" className="nav-link">HOME</Link>
<ul className="nav-menu">
<li><Link to="/history" className="nav-link">History</Link></li>
</ul>
</nav>
);
}
export default NavBar;接着，在 App.tsx 中定义布局路由，并将 NavBar 与 Outlet 组合为根级 layout：
// 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 /> {/* 子路由元素将在此处被渲染 */}
</main>
</>
);
// 配置嵌套路由：所有路径都作为 AppLayout 的 children
const router = createBrowserRouter([
{
element: <AppLayout />,
children: [
{ path: "/", element: <MainPage /> },
{ path: "/history", element: <HistoryPage /> }
// 可继续添加其他页面，均自动继承 NavBar
]
}
]);
function App() {
return <RouterProvider router={router} />;
}
export default App;⚠️ 关键注意事项
- 禁止嵌套 Router：BrowserRouter（v6 中已不推荐直接使用）或任何 RouterProvider 都不应在子组件中重复声明。整个应用应仅有一个顶层 RouterProvider。
- Outlet 是占位符：它不是组件，而是 React Router 提供的“插槽”，用于在 layout 中动态插入当前匹配路由的 element。
- 状态持久性自动保障：由于导航不再触发页面刷新，MainPage 中通过 useRandomObject() 获取的 randomObject 将保持不变——这正是你期望的用户体验。若需在某些场景下强制刷新数据（如主动点击“重抽”按钮），可单独封装逻辑，而非依赖路由跳转。
- 样式建议：为避免布局抖动，建议给 #main-content 设置最小高度（如 min-height: calc(100vh - 64px)），确保 NavBar 固定后内容区仍占满视口。
✅ 验证效果
完成上述修改后：
- 点击 NavBar 中的 “History” → URL 变为 /history，HistoryPage 立即渲染，无刷新；
- 点击 “HOME” 返回 → URL 变为 /，MainPage 渲染，且其中的 randomObject 与之前完全一致；
- 浏览器前进/后退按钮、书签直连等原生导航行为全部正常工作。
这种基于 layout 的路由设计不仅是解决当前问题的根本方案，更是构建可维护、可扩展 React 应用的标准范式。
