react 如何实现多页面

实现多页面的方法

React 本身是单页应用（SPA）框架，但可以通过配置实现多页面应用（MPA）。以下是几种常见方法：

使用路由实现伪多页面

通过 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 多入口

修改 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 文件和 React 根组件：

public/
  index.html
  about.html
  contact.html

src/
  index.js
  about.js
  contact.js

静态站点生成器

使用 Gatsby 或 Next.js 等框架生成静态页面：

# Next.js 示例
npx create-next-app

服务端渲染

通过 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>;
}

注意事项

• 多入口打包会导致代码重复，需优化公共代码提取
• 静态资源路径需要正确处理
• 页面间跳转可能导致全局状态丢失
• SEO 优化需要考虑服务端渲染或静态生成方案

性能优化建议

1. 代码分割（Code Splitting）
2. 预加载关键资源
3. 使用 CDN 加速静态资源
4. 实施懒加载策略
5. 压缩生产环境代码