Building a Flexible React Management Backend with Custom Routing, Navigation, and Plugin System
This article describes how to create a feature‑rich, extensible React admin panel by implementing a convention‑based routing system, unified navigation with menu and draggable tabs, a Redux‑centric state management strategy, and a modular plugin architecture, while also integrating MUI, Next.js, and AI‑assisted code generation.
A Java developer quickly assembled a powerful admin backend using the Ruoyi framework, prompting the author—who usually builds admin panels with React—to create a more flexible, React‑based solution that can interoperate with Ruoyi while remaining lightweight.
The login page is kept simple and visually appealing, with responsive design for mobile devices.
The routing system follows a convention‑based approach similar to Next.js, where the file structure defines routes. Route data is split into three elements—route ID, configuration, and structure—and TypeScript ensures strong typing and consistency.
Navigation comprises a menu, tabs, and breadcrumbs. The menu mirrors Ruoyi's permission model, exposing only essential fields (tree structure and component name). Tabs are managed independently, support drag‑and‑drop reordering via DndKit, persist across refreshes, and can be detached into separate windows with right‑click menus.
The settings system allows project‑wide configuration of name, logo, theme (day/night), and layout previews, as well as customizable route transition animations.
A state management layer built around Redux (with optional Zustand) addresses common pain points such as scattered business logic, type‑definition chaos, and excessive prop drilling, aiming for a "state‑first, component‑state‑minimal" philosophy.
The plugin architecture enables easy addition of theme, layout, PDF preview, multi‑window (winbox), markdown, and Rive animation plugins, as well as community‑contributed extensions like a music player and an AI‑powered code highlighter (shiki).
Future plans include rebuilding the admin panel with Next.js and MUI to meet Western aesthetic preferences, leveraging the author's existing MUI‑Eazy component library for rapid form generation and configuration‑driven UI creation.
Code generation and AI integration are explored to accelerate development, with the entire monorepo (frontend in the frontend folder) runnable via npm run start . The source code is open‑source, combining both the React frontend and Java backend (Ruoyi) for interested developers.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.