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