react 如何实现多页面
实现多页面 React 应用的方法
React 默认是单页应用（SPA），但可以通过以下方式实现多页面效果：
使用 React Router 模拟多页面
通过路由配置实现不同“页面”的切换，实际仍在单页中：
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route path="/contact" component={ContactPage} />
</Switch>
</Router>
);
}配置多入口点
修改 webpack 配置创建多个入口文件，生成多个 HTML 页面：
// webpack.config.js
module.exports = {
entry: {
main: './src/index.js',
about: './src/about.js',
contact: './src/contact.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};使用 HTML 模板插件
配合 HtmlWebpackPlugin 生成多个 HTML 文件：
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
template: './src/about.html',
filename: 'about.html',
chunks: ['about']
})
]服务器端路由配置
确保服务器能正确处理多页面路由，防止刷新时出现 404：
// Express 示例
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
app.get('/about', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'about.html'));
});静态站点生成
使用 Gatsby 或 Next.js 等框架生成静态多页面站点：
// Next.js 页面路由示例
// pages/index.js
export default function Home() {
return <div>Home Page</div>;
}
// pages/about.js
export default function About() {
return <div>About Page</div>;
}微前端架构
通过模块联邦或 iframe 集成多个独立 React 应用：
// webpack 模块联邦配置
new ModuleFederationPlugin({
name: 'app1',
remotes: {
app2: 'app2@http://localhost:3002/remoteEntry.js'
}
});选择哪种方法取决于项目需求、团队熟悉度和部署环境等因素。
