react 如何实现多页面
在 React 中实现多页面应用（MPA）通常需要结合路由配置或构建工具的支持。以下是几种常见方法：
使用 React Router 实现客户端多页面
React Router 适合构建单页应用（SPA），但可以通过动态路由模拟多页面效果。
安装 React Router：
npm install react-router-dom配置路由：
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}通过多入口配置实现传统 MPA
使用 Webpack 或 Vite 配置多个入口文件，生成独立的 HTML 页面。
Webpack 配置示例（webpack.config.js）：
module.exports = {
entry: {
home: './src/home.js',
about: './src/about.js',
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist',
},
plugins: [
new HtmlWebpackPlugin({
template: './src/home.html',
filename: 'home.html',
chunks: ['home'],
}),
new HtmlWebpackPlugin({
template: './src/about.html',
filename: 'about.html',
chunks: ['about'],
}),
],
};Vite 配置示例（vite.config.js）：
import { defineConfig } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';
export default defineConfig({
build: {
rollupOptions: {
input: {
main: './index.html',
about: './about.html',
},
},
},
plugins: [
createHtmlPlugin({
pages: [
{ entry: '/src/main.js', filename: 'index.html' },
{ entry: '/src/about.js', filename: 'about.html' },
],
}),
],
});静态站点生成（SSG）方案
使用 Next.js 或 Gatsby 等框架生成静态多页面：
Next.js 示例：
- 创建页面文件
pages/index.js和pages/about.js，框架会自动生成路由。 - 运行
next build会生成静态 HTML 文件。
服务端渲染（SSR）方案
通过 Next.js 或自定义 Node 服务器实现动态多页面渲染：
Next.js API 路由示例：
// pages/api/page.js
export default function handler(req, res) {
res.status(200).json({ page: 'dynamic' });
}注意事项
- SEO 优化：MPA 更适合搜索引擎抓取，SPA 需额外配置预渲染。
- 状态隔离：多页面间状态不共享，需通过 URL 参数或本地存储传递数据。
- 性能权衡：MPA 每次跳转全页刷新，SPA 仅加载差异内容。
根据项目需求选择合适方案：轻量级静态内容可用多入口配置，复杂交互推荐 React Router 或框架方案。
