当前位置：首页 > React

react如何动态增加页面

2026-03-10 23:56:43React

动态增加页面的实现方法

在React中动态增加页面通常涉及路由配置和组件的动态加载。以下是几种常见的方法：

使用React Router实现动态路由

React Router v6提供了动态路由功能，可以通过useRoutes钩子或<Routes>组件动态生成路由：

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

function App() {
  const [pages, setPages] = useState([
    { path: '/page1', element: <Page1 /> },
    { path: '/page2', element: <Page2 /> }
  ]);

  const addNewPage = (path, component) => {
    setPages([...pages, { path, element: component }]);
  };

  return (
    <BrowserRouter>
      <Routes>
        {pages.map((page, index) => (
          <Route key={index} path={page.path} element={page.element} />
        ))}
      </Routes>
    </BrowserRouter>
  );
}

使用懒加载动态导入组件

结合React的lazy和Suspense实现按需加载：

import { lazy, Suspense } from 'react';

const DynamicPage = lazy(() => import('./DynamicPage'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <DynamicPage />
    </Suspense>
  );
}

基于配置的动态路由

将路由配置存储在外部文件或数据库中，运行时动态生成路由：

// routesConfig.js
export default [
  { path: '/home', component: 'Home' },
  { path: '/about', component: 'About' }
];

// App.js
import routesConfig from './routesConfig';

function App() {
  const routes = routesConfig.map((route) => (
    <Route 
      key={route.path}
      path={route.path}
      element={React.createElement(lazy(() => import(`./${route.component}`)))}
    />
  ));

  return <Routes>{routes}</Routes>;
}

使用高阶组件管理动态页面

创建高阶组件处理页面注册和渲染：

const pageRegistry = {};

export const registerPage = (name, component) => {
  pageRegistry[name] = component;
};

export const DynamicPage = ({ pageName }) => {
  const PageComponent = pageRegistry[pageName];
  return PageComponent ? <PageComponent /> : <NotFound />;
};