ant design pro plus

Ant Design Pro Plus

For official instructions, please refer to /master/README.zh-CN

Routing-based page label display

Compatibility: ^[email protected] | ^[email protected]

• Supports nested routing rendering of pages
• Two tab page modes available
  • Based on routing, each route only renders one tab page
  • Based on the routing parameters, the hash value of all parameters of each route is calculated. Different hash values ​​render different tabs.
• Fixed tab bar
• Quick operation
  • Refresh tabs - window.tabsAction.reloadTab()
  • Close tab - window.tabsAction.closeTab()
  • Return to the previous tab - window.tabsAction.goBackTab()
  • Close and return to the previous tab - window.tabsAction.closeAndGoBackTab()
  • Get the tabKey corresponding to the location. If no parameters are entered, return the currently activated tabKey - window.tabsAction.getTabKey()
  • Listen for activeKey change events - window.tabsAction.listenActiveChange()
• reloadable , supports refreshing the current tab page in the header operation bar
• follow , a new configuration in the routing definition. The default opening method is to add it to the end of all tabs. You can configure this attribute to make a tab open behind the tab specified follow (please refer to the query page Demo)
• persistent , supports restoring the last tab state after page refresh

Notice:

• Returning to the default will only return the last route, so if the last route is not closed, it will jump repeatedly between the two routes. When the last opened tab is deleted and the return method is called again, a warning will only be printed.
• When you need to fix the tab header and render the Footer, please use the footerRender configuration of SwitchTabsLayout instead of the footerRender provided by ProLayout to ensure that the component can properly fix the tab header.

Code structure

 ├── config
│   └── defaultSettings.ts    # 系统风格配置，新增关于 SwitchTabs 的配置
├── src
│   └── layouts
│       └── SwitchTabsLayout  # 路由加载
│   └── pages
│       └── SwitchTabsDemo    # 标签页功能展示

???

The use-switch-tabs package has been released and refactored through use-switch-tabs. —— 2021.06.19

Branch description

v4-legacy

Based on the feature branch of ant design pro V4 version.

v2-legacy

The original warehouse name is ant design pro v2 plus , and the code is moved to this branch. After renaming it to ant design pro plus , follow up the updates in ant design pro on the master branch.

umi/v2.x

Function implementation based on umi@​2.x.

Q&A

The tab page function is migrated from ant design pro V4 to V5

Pro V5 has undergone a major reconstruction in its architecture, and more implementation details are shielded through Umi's plug-in mechanism. However, thanks to the fact that the core functions of the tab page have been outsourced to use-switch-tabs, there is not much work to be done. However, it is worth noting that the version of @umijs/plugin-layout cannot be lower than 0.18.0 . See this discussion for details. Therefore, the version of @umijs/preset-react cannot be lower than 1.8.28 . Please see this update for details.

Finally, the implementation entrance has been changed to app.ts. Through this entrance, you can view the specific implementation. The relevant UI components are basically unchanged compared to V4.

---

Supplementary note: Since V5 has started to use flat routing, and the current use-switch-tabs has been adapted to redirect, when using the page tagging function, pay attention to the fact originalRoutes need to be handled properly to avoid abnormal isSwitchTab judgments.

Problems in upgrading the children -based tab function from umi@​2.x to umi@​3.x

For related discussion and analysis, please refer to umijs/umi#4425. The final analysis found the root cause of the temporary inability to upgrade. PR umijs/umi#6101 fixed the problem, but you need to use umi@​3.3.8 or above.

Performance issues

You can use the withSwitchTab function to wrap page components to avoid repeated rendering of the page. It is worth noting that if some special states are used in the page, such as hooks such as useLocation , optimization will not be possible. If you must use it, you can use useMemo optimization by yourself.

Label flickering problem

The label will flash when switching #5. I didn't notice it at first, but later I found out the reason. Please refer to ant-design/ant-design#25343.

The preview page cannot use dynamic routing

Since it is deployed to Github Pages and exportStatic is configured, dynamic routing in the form of /result/:id cannot be used. It also uses the isProductionEnv variable to avoid login logic and other problems. If there is an interface error, it can be ignored. The focus is on function implementation_(:з　∠)_