Ant Design Pro Plus

Ant Design Pro Plus is an open-source enhancement of Ant Design Pro that adds route-based, browser-style tabbed navigation to admin dashboards, built on React, Umi, and Ant Design by yunsii.

What is Ant Design Pro Plus?

Ant Design Pro Plus is a boilerplate fork of Ant Design Pro that implements switchable page tabs driven by the current route. It takes a standard Ant Design Pro project as its base and outputs an admin dashboard layout where each route (or unique route-parameter combination) renders as a tab in a switchable tab bar. The project runs on Umi, with declared compatibility for Umi 2.0 and Umi 3.3.8 or above, and is maintained by yunsii with the core tab logic published separately as the use-switch-tabs package.

Key Features

Ant Design Pro Plus adds a focused set of tab-management features on top of Ant Design Pro, all implemented in React with Ant Design components.

• Nested route tab rendering — Every nested route can render as its own tab; two modes are available: one tab per route, or one tab per hash of all route parameters.
• Two tab modes — Developers choose between treating each route as a single tab or treating each distinct set of route parameters as a separate tab.
• Pinned tab bar — The tab header can be fixed; when the header is pinned and a footer is needed, use SwitchTabsLayout's footerRender instead of ProLayout's to keep the header fixed.
• Tabs action API — Exposes window.tabsAction with reloadTab, closeTab, goBackTab, closeAndGoBackTab, getTabKey, and listenActiveChange for programmatic control.
• Tab persistence — The persistent option restores the previous tab state after a page refresh.
• Follow configuration — A route can be configured with follow so its tab opens immediately after a specified tab instead of at the end of the tab bar.
• Performance wrapper — The withSwitchTab function wraps page components to prevent repeated rendering; pages using hooks such as useLocation cannot be optimized this way.
• Version compatibility — Supports Umi 2.x and Umi 3.3.8+; for Pro V5, @umijs/plugin-layout must be 0.18.0 or above and @umijs/preset-react 1.8.28 or above.

Who is it for?

Ant Design Pro Plus is aimed at developers and teams already using Ant Design Pro who want multi-tab navigation similar to a browser in their admin console.

• Admin dashboard developers — Add tabbed navigation to a React + Umi admin project by following the included SwitchTabsDemo and layout structure.
• Enterprise front-end teams — Maintain large internal systems where users juggle multiple pages; the persistence and follow features preserve workflow context.
• Developers migrating Ant Design Pro V4 to V5 — The README documents the required minimum plugin versions and the app.ts entry point for enabling tabs in V5.

What can you do with it?

With Ant Design Pro Plus you can turn a standard Ant Design Pro dashboard into a tabbed workspace where every page, and even every parameterized variant of a page, opens in its own tab.

• Build a multi-tab admin shell — Configure SwitchTabs in defaultSettings.ts and route loading through SwitchTabsLayout to get tabs without writing a tab bar from scratch.
• Preserve user context — Enable persistent so that a page refresh restores the tabs the user had open.
• Control tabs from code — Use the window.tabsAction methods to refresh, close, navigate back, or listen to active tab changes from any component.

How does Ant Design Pro Plus work?

The implementation is split across three parts of the repository: config/defaultSettings.ts holds the SwitchTabs configuration, src/layouts/SwitchTabsLayout handles route loading and tab rendering, and src/pages/SwitchTabsDemo demonstrates the feature. The underlying tab logic has been extracted into the use-switch-tabs package, allowing the same behavior to be reused outside this boilerplate.

FAQ

Does Ant Design Pro Plus work with Umi 3?

Yes, but Umi 3.3.8 or above is required. The upgrade issue was fixed by PR umijs/umi#6101, and the project also needs @umijs/plugin-layout 0.18.0+ and @umijs/preset-react 1.8.28+ for the Pro V5 architecture.

Can I use dynamic routes in the live preview?

No. The demo is deployed to GitHub Pages with exportStatic enabled, so dynamic routes shaped like /result/:id cannot be used in the preview. The repository includes an isProductionEnv variable to skip login logic and ignore API errors in the deployed demo.

How do I stop tabs from flickering during switching?

A known flicker issue is tracked in issue #5 and traced to an Ant Design problem documented in ant-design/ant-design#25343. Updating the related Ant Design components is the suggested path to resolve it.

What hooks break the performance optimization?

The withSwitchTab wrapper optimizes re-renders, but pages using stateful hooks such as useLocation cannot be optimized with it. In those cases the README recommends wrapping the expensive parts with useMemo manually.