当前位置：首页 > React

react如何分割页面

2026-02-11 20:15:37React

页面分割方法

使用React分割页面可以通过组件化实现，将页面拆分为多个独立模块。组件化开发便于维护和复用，提升代码可读性。

按功能模块拆分

将页面划分为头部、侧边栏、内容区、底部等独立组件。例如：

react如何分割页面

const Header = () => <header>导航栏</header>;
const Sidebar = () => <aside>侧边菜单</aside>;
const Content = () => <main>主内容区</main>;
const Footer = () => <footer>版权信息</footer>;

function App() {
  return (
    <>
      <Header />
      <div className="layout">
        <Sidebar />
        <Content />
      </div>
      <Footer />
    </>
  );
}

动态路由分割

使用React Router实现基于路由的页面分割：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/products" element={<ProductPage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
}

懒加载分割

通过React.lazy实现代码分割，减少初始加载体积：

react如何分割页面

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

布局组件模式

创建可复用的布局组件处理通用页面结构：

const Layout = ({ children }) => (
  <div className="app-layout">
    <Header />
    <div className="content">{children}</div>
    <Footer />
  </div>
);

function HomePage() {
  return <Layout><HomeContent /></Layout>;
}

状态管理分割

复杂页面可结合状态管理库如Redux或Context API，将状态逻辑与UI组件分离：

const UserContext = createContext();

function App() {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <AuthSection />
      <ProfileSection />
    </UserContext.Provider>
  );
}