当前位置：首页 > React

React如何实现多页面布局

2026-01-25 15:18:13React

实现多页面布局的方法

在React中实现多页面布局通常涉及路由配置和布局组件嵌套。以下是几种常见方法：

使用React Router配置嵌套路由 通过react-router-dom的Outlet组件实现布局嵌套：

// 主布局组件
const MainLayout = () => {
  return (
    <div>
      <Header />
      <Outlet />  // 子路由内容将在此渲染
      <Footer />
    </div>
  );
}

// 路由配置
const router = createBrowserRouter([
  {
    path: "/",
    element: <MainLayout />,
    children: [
      { path: "home", element: <HomePage /> },
      { path: "about", element: <AboutPage /> }
    ]
  }
]);

条件渲染布局组件 根据不同路径动态选择布局：

function App() {
  const location = useLocation();

  const getLayout = () => {
    if (location.pathname.startsWith('/admin')) {
      return <AdminLayout />;
    }
    return <DefaultLayout />;
  };

  return getLayout();
}

使用高阶组件包装 创建布局高阶组件统一处理：

const withLayout = (Component, Layout) => (props) => (
  <Layout>
    <Component {...props} />
  </Layout>
);

// 使用示例
const HomePageWithLayout = withLayout(HomePage, MainLayout);

动态布局切换方案

上下文API管理布局状态 通过Context实现全局布局控制：

const LayoutContext = createContext();

export const LayoutProvider = ({ children }) => {
  const [layoutType, setLayoutType] = useState('default');

  return (
    <LayoutContext.Provider value={{ layoutType, setLayoutType }}>
      {layoutType === 'admin' ? <AdminLayout>{children}</AdminLayout> : <DefaultLayout>{children}</DefaultLayout>}
    </LayoutContext.Provider>
  );
};

CSS Grid/Flex布局系统 构建响应式布局结构：

React如何实现多页面布局

const AppLayout = ({ children }) => {
  return (
    <div style={{ 
      display: 'grid',
      gridTemplateAreas: `"header header" "sidebar main"`,
      gridTemplateColumns: '200px 1fr'
    }}>
      <div style={{ gridArea: 'header' }}><Header /></div>
      <div style={{ gridArea: 'sidebar' }}><Sidebar /></div>
      <div style={{ gridArea: 'main' }}>{children}</div>
    </div>
  );
}