使用React Router实现带独立导航历史的标签页导航是否有标准方案？

React Router v6+ 完全可以优雅实现该需求，也有其他适配的路由库可选，具体方案如下：

基于React Router的实现方案 #

核心思路是路由分层+组件缓存，不需要自定义history实例，只需要调整路由结构和加少量缓存逻辑：

• 第一步：定义分层路由结构，每个底部标签对应一个独立的嵌套路由组，标签下的子页面都作为该路由组的子路由：

// 路由配置示例
import { createBrowserRouter } from "react-router-dom";
import KeepAlive from "react-activation";

const router = createBrowserRouter([
  {
    path: "/",
    element: <BaseLayout />, // 承载底部导航栏的公共布局组件
    children: [
      // 首页标签路由组
      {
        path: "home",
        element: <KeepAlive><HomePage /></KeepAlive>,
        children: [
          { path: "post/:id", element: <PostDetail /> },
          { path: "user/:uid", element: <UserProfile /> }
        ]
      },
      // 搜索标签路由组
      {
        path: "search",
        element: <KeepAlive><SearchPage /></KeepAlive>,
        children: [
          { path: "result", element: <SearchResult /> }
        ]
      },
      // 剩余其他标签路由组结构同理
    ]
  }
], {
  // 开启手动滚动恢复，配合缓存自动保留滚动位置
  scrollRestoration: "manual"
});

• 第二步：用react-activation的KeepAlive组件包裹每个标签的根路由组件，切换标签时不会卸载组件，天然保留页面状态和嵌套路由的访问栈
• 第三步：维护每个标签的最后访问路径，切换底部标签时直接跳转到对应标签的最后访问路径，而非强制回到标签根路由，即可实现标签栈状态的完全保留

备选路由库方案 #

如果不想自己结合缓存组件实现，也可以选择针对性的路由库：

• react-router-tabs：基于React Router封装的多标签专属路由库，内置独立路由栈、状态缓存能力，API和React Router完全兼容，改造成本极低
• TanStack Router：原React Location，原生支持多路由上下文、视图缓存，复杂路由场景下灵活性和可维护性优于React Router，可直接实现独立标签栈需求

内容的提问来源于stack exchange，提问作者D. Phi