Building a Management Backend with Ant Design 5, React 18, Vite, and TypeScript

The author starts by comparing Ant Design 5 (Antd5) with MUI, highlighting Antd5's ease of use, powerful theming, and visual appeal, which makes it the obvious choice for building a management backend.

Next, the article provides a step‑by‑step setup for a React 18 project using Vite and TypeScript, including Vite configuration, alias setup, and proxy settings to handle API calls during development.

Configuration files are shown, such as vite.config.ts and tsconfig.json , demonstrating how to enable path aliases and declare module types for various asset formats.

A custom font‑effect component is introduced, with its full source code wrapped in ... tags, illustrating how to create animated text effects using React hooks.

The login page is built using Antd5's Card component, and the home page layout includes a left menu, tab bar, and breadcrumb navigation. The routing data is split into a structural tree and content map, enabling clear separation of concerns.

Recursive functions processRoute and processRoute (for menu generation) are provided to transform the structural data into a complete route configuration and a menu data structure compatible with Antd5's Menu component.

A custom hook useLocationListen is presented to listen for route changes, update selected and open menu keys, and store tab history in a MobX global store.

Tab management is handled with Antd5's Tabs component, using CSS modules and the :global selector to override default margins without affecting global styles.

The article also shows how to implement a KeepAlive component that caches rendered pages to preserve form state when switching tabs, using React's useRef , useReducer , and memoization.

Theme customization is simplified with a higher‑order component that wraps any component with Antd5's ConfigProvider , allowing developers to pass a theme token object once.

Finally, the author discusses permission design and dynamic routing with React Router 6.4.3, demonstrating how to generate routes based on permission data, replace RouterProvider with a classic Routes / Route tree, and recursively render routes using a helper function.

All code snippets are preserved in ... blocks to maintain readability and completeness.