Lobe Chat React组件开发指南：UI库选择、路由架构与最佳实践

react by lobehub/lobe-chat

293 周安装量

74,700 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/lobehub/lobe-chat --skill react

UI组件库 React 前端架构

🇨🇳中文介绍

React 组件编写指南

复杂样式使用 antd-style；简单情况使用内联 style 属性
布局使用 @lobehub/ui 中的 Flexbox 和 Center（参见 references/layout-kit.md）
组件优先级：src/components > 已安装的包 > @lobehub/ui > antd
使用选择器访问 zustand 存储数据

@lobehub/ui 组件

如果不确定组件的用法，请在本项目中搜索现有代码。大多数组件都扩展了 antd 并添加了额外的属性。

参考：node_modules/@lobehub/ui/es/index.mjs 以获取所有可用组件。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

网页可访问性（A11y）开发指南：实现WCAG合规、键盘导航与屏幕阅读器支持

12,600 周安装

UI组件模式实战指南：构建可复用React组件库与设计系统

10,700 周安装

Tailwind CSS v4 + shadcn/ui 生产级技术栈配置指南与最佳实践

2,600 周安装

TanStack Query v5 完全指南：React 数据管理、乐观更新、离线支持

2,500 周安装

通用：ActionIcon, ActionIconGroup, Block, Button, Icon
数据展示：Avatar, Collapse, Empty, Highlighter, Markdown, Tag, Tooltip
数据输入：CodeEditor, CopyButton, EditableText, Form, FormModal, Input, SearchBar, Select
反馈：Alert, Drawer, Modal
布局：Center, DraggablePanel, Flexbox, Grid, Header, MaskShadow
导航：Burger, Dropdown, Menu, SideNav, Tabs

混合路由：Next.js App Router（静态页面）+ React Router DOM（主 SPA）。

路由类型	使用场景	实现方式
Next.js App Router	认证页面（登录、注册、OAuth）	`src/app/[variants]/(auth)/`
React Router DOM	主 SPA（聊天、设置）	`desktopRouter.config.tsx`

入口：src/spa/entry.web.tsx（web），src/spa/entry.mobile.tsx，src/spa/entry.desktop.tsx
桌面端路由：src/spa/router/desktopRouter.config.tsx
移动端路由：src/spa/router/mobileRouter.config.tsx
路由工具：src/utils/router.tsx

import { dynamicElement, redirectElement, ErrorBoundary } from '@/utils/router';

element: dynamicElement(() => import('./chat'), 'Desktop > Chat');
element: redirectElement('/settings/profile');
errorElement: <ErrorBoundary resetPath="/chat" />;

重要：对于 SPA 页面，使用 react-router-dom 中的 Link，而不是 next/link。

// ❌ 错误
import Link from 'next/link';
<Link href="/">首页</Link>;

// ✅ 正确
import { Link } from 'react-router-dom';
<Link to="/">首页</Link>;

// 在组件中
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/chat');

// 从存储中
const navigate = useGlobalStore.getState().navigate;
navigate?.('/settings');

🇺🇸English

React Component Writing Guide

Use antd-style for complex styles; for simple cases, use inline style attribute
Use Flexbox and Center from @lobehub/ui for layouts (see references/layout-kit.md)
Component priority: src/components > installed packages > @lobehub/ui > antd
Use selectors to access zustand store data

@lobehub/ui Components

If unsure about component usage, search existing code in this project. Most components extend antd with additional props.

Reference: node_modules/@lobehub/ui/es/index.mjs for all available components.

Common Components:

General: ActionIcon, ActionIconGroup, Block, Button, Icon
Data Display: Avatar, Collapse, Empty, Highlighter, Markdown, Tag, Tooltip
Data Entry: CodeEditor, CopyButton, EditableText, Form, FormModal, Input, SearchBar, Select
Feedback: Alert, Drawer, Modal
Layout: Center, DraggablePanel, Flexbox, Grid, Header, MaskShadow
Navigation: Burger, Dropdown, Menu, SideNav, Tabs

Routing Architecture

Hybrid routing: Next.js App Router (static pages) + React Router DOM (main SPA).

Route Type	Use Case	Implementation
Next.js App Router	Auth pages (login, signup, oauth)	`src/app/[variants]/(auth)/`
React Router DOM	Main SPA (chat, settings)	`desktopRouter.config.tsx`

Key Files

Entry: src/spa/entry.web.tsx (web), src/spa/entry.mobile.tsx, src/spa/entry.desktop.tsx
Desktop router: src/spa/router/desktopRouter.config.tsx
Mobile router: src/spa/router/mobileRouter.config.tsx
Router utilities: src/utils/router.tsx

Router Utilities

import { dynamicElement, redirectElement, ErrorBoundary } from '@/utils/router';

element: dynamicElement(() => import('./chat'), 'Desktop > Chat');
element: redirectElement('/settings/profile');
errorElement: <ErrorBoundary resetPath="/chat" />;

Navigation

Important : For SPA pages, use Link from react-router-dom, NOT next/link.

// ❌ Wrong
import Link from 'next/link';
<Link href="/">Home</Link>;

// ✅ Correct
import { Link } from 'react-router-dom';
<Link to="/">Home</Link>;

// In components
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/chat');

// From stores
const navigate = useGlobalStore.getState().navigate;
navigate?.('/settings');

Weekly Installs

202

Repository

lobehub/lobe-chat

GitHub Stars

74.2K

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code179

opencode165

cursor152

gemini-cli150

antigravity143

codex140

json-render生成式UI框架：AI驱动、多平台JSON渲染，安全构建动态界面

497 周安装