当前位置：首页 > React

React如何引入页面使用

2026-03-11 00:44:15React

React 引入页面的方法

在 React 中引入页面通常有两种方式：使用组件化方式或通过路由库实现多页面切换。以下是具体实现方法：

组件化引入页面

将页面作为组件引入并渲染：

// 页面组件
function HomePage() {
  return <div>Home Page Content</div>;
}

// 主组件中引入
function App() {
  return (
    <div>
      <HomePage />
    </div>
  );
}

使用 React Router 管理多页面

React如何引入页面使用

安装 react-router-dom：

npm install react-router-dom

配置路由实现页面切换：

React如何引入页面使用

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

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

动态导入页面（代码分割）

使用 React.lazy 实现按需加载：

const AboutPage = React.lazy(() => import('./pages/AboutPage'));

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

注意事项

页面组件建议存放在专门的 pages 或 views 目录路由配置可以提取到单独的路由配置文件动态导入适合大型应用优化性能每个页面组件应保持独立性和可复用性