react 如何实现多页面
实现多页面应用的方法
在React中实现多页面应用（MPA）通常需要结合路由配置和项目结构优化。以下是几种常见方法：
使用React Router配置多路由
安装React Router依赖：
npm install react-router-dom配置基本路由结构：
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>
);
}创建独立页面组件
每个页面应作为独立组件开发：
// HomePage.js
function HomePage() {
return <div>Home Content</div>;
}
// AboutPage.js
function AboutPage() {
return <div>About Us</div>;
}配置Webpack多入口
修改webpack.config.js实现多入口打包：
module.exports = {
entry: {
main: './src/index.js',
about: './src/about.js',
contact: './src/contact.js'
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist'
}
};使用HTML模板插件
配合html-webpack-plugin生成多个HTML文件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
template: './src/about.html',
filename: 'about.html',
chunks: ['about']
})
]
};服务端渲染方案
对于需要SEO优化的页面，可采用Next.js框架：
npx create-next-app页面文件直接放在pages目录：
pages/
index.js
about.js
contact.js静态站点生成
使用Gatsby构建静态多页面应用：
npm install -g gatsby-cli
gatsby new my-project页面组件放置在src/pages目录，自动生成路由：
src/pages/
index.js
about.js
contact.js部署注意事项
确保服务器配置支持HTML5 History API：
- Apache: 配置.htaccess重定向规则
- Nginx: 添加try_files配置
- Netlify/Vercel: 添加_redirects文件
每种方法适用于不同场景，SPA方案适合交互复杂的应用，MPA方案适合内容为主的网站，静态生成适合内容稳定的项目。
