LobeHub React 组件库与路由架构指南 | 高效开发组件与混合路由方案

react by lobehub/lobehub

1,400 周安装量

74,300 GitHub Stars

GitHub

安装命令

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

AI/机器学习开发

🇨🇳中文介绍

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

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

733,500 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

252,100 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

202,600 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

133,200 周安装

通用：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

1.4K

Repository

lobehub/lobehub

GitHub Stars

74.1K

First Seen

Jan 27, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode1.3K

codex1.3K

gemini-cli1.3K

github-copilot1.3K

kimi-cli1.2K

amp1.2K

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

102,200 周安装