React如何引入页面使用
React 引入页面的方法
在 React 中引入页面通常有两种方式：使用组件化方式或通过路由库实现多页面切换。以下是具体实现方法：
组件化引入页面
将页面作为组件引入并渲染：
// 页面组件
function HomePage() {
return <div>Home Page Content</div>;
}
// 主组件中引入
function App() {
return (
<div>
<HomePage />
</div>
);
}使用 React Router 管理多页面
安装 react-router-dom：
npm install react-router-dom配置路由实现页面切换：
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 目录 路由配置可以提取到单独的路由配置文件 动态导入适合大型应用优化性能 每个页面组件应保持独立性和可复用性
