react如何分割页面
在React中分割页面的方法
使用React Router进行路由分割
React Router是React生态中最常用的路由库，用于实现单页应用（SPA）的多页面效果。通过BrowserRouter、Routes和Route组件定义不同路径对应的页面组件。动态路由参数可通过useParams钩子获取，嵌套路由使用Outlet组件渲染子路由内容。
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}按功能模块拆分组件
将页面分解为可复用的UI组件
将页面拆分为Header、Sidebar、MainContent等独立组件，通过props传递数据。使用组合模式（children prop）实现灵活的布局嵌套，保持组件职责单一化。
const Layout = ({ children }) => (
<div className="layout">
<Header />
<div className="content">{children}</div>
<Footer />
</div>
);
// 使用示例
<Layout>
<Dashboard />
</Layout>代码分割与懒加载
利用React.lazy实现动态导入
通过React.lazy和Suspense实现组件级代码分割，减少初始加载体积。动态导入语法会被Webpack自动处理为代码分块（chunk）。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<Loader />}>
<LazyComponent />
</Suspense>
);
}状态管理分割
按业务域管理状态
复杂应用可使用Redux Toolkit的createSlice或Zustand创建独立状态模块。Context API适合中等规模状态管理，通过多个Context隔离不同功能的状态。
// 创建独立Context
const UserContext = createContext();
const ThemeContext = createContext();
function App() {
return (
<UserContext.Provider value={userData}>
<ThemeContext.Provider value={themeData}>
<Page />
</ThemeContext.Provider>
</UserContext.Provider>
);
}样式作用域隔离
CSS Modules或Styled Components
使用CSS Modules自动生成唯一类名避免冲突，或采用Styled Components实现组件级样式封装。Sass/Less的嵌套语法也能帮助组织样式文件结构。
// CSS Modules示例
import styles from './Button.module.css';
function Button() {
return <button className={styles.primary}>Click</button>;
}目录结构组织
功能导向的目录结构
推荐按功能而非类型组织文件，每个功能模块包含组件、样式、测试和逻辑文件。常用的结构模式包括"features"文件夹或领域驱动设计（DDD）结构。
src/
├── features/
│ ├── auth/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── store/
│ └── dashboard/
├── pages/
├── shared/
└── App.js
