react

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Component Writing Guide

React组件编写指南

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

复杂样式使用antd-style；简单场景使用内联
```
style
```
属性

布局使用

@lobehub/ui

中的

Flexbox

和

Center

（参考

references/layout-kit.md

）

组件优先级：
```
src/components
```
> 已安装包 >
```
@lobehub/ui
```
> antd
使用选择器访问zustand store数据

@lobehub/ui Components

@lobehub/ui组件

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

如果不确定组件用法，可搜索项目中现有代码。大多数组件是基于antd扩展了额外属性。

参考：

node_modules/@lobehub/ui/es/index.mjs

获取所有可用组件。

常用组件：

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

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`

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

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

Key Files

关键文件

Entry:
```
src/app/[variants]/page.tsx
```

Desktop router:

src/app/[variants]/router/desktopRouter.config.tsx

Mobile router:

src/app/[variants]/(mobile)/router/mobileRouter.config.tsx

Router utilities:
```
src/utils/router.tsx
```

入口：
```
src/app/[variants]/page.tsx
```

桌面端路由：

src/app/[variants]/router/desktopRouter.config.tsx

移动端路由：

src/app/[variants]/(mobile)/router/mobileRouter.config.tsx

路由工具：
```
src/utils/router.tsx
```

Router Utilities

路由工具

tsx

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

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

tsx

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

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

Navigation

// ❌ 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');

重要提示：对于SPA页面，使用

react-router-dom

的

Link

，而非

next/link

。

tsx

// ❌ 错误写法
import Link from 'next/link';
<Link href="/">Home</Link>

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

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

// 从store中获取
const navigate = useGlobalStore.getState().navigate;
navigate?.('/settings');