当前位置：首页 > React

react 实现多页面开发

2026-01-27 17:00:24React

使用 React 实现多页面开发的方法

React 通常用于单页应用（SPA），但通过配置可以实现多页面开发。以下是几种常见方法：

配置多入口 Webpack

修改 Webpack 配置以支持多入口点，每个入口对应一个页面：

react 实现多页面开发

// webpack.config.js
module.exports = {
  entry: {
    page1: './src/page1/index.js',
    page2: './src/page2/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/page1/index.html',
      filename: 'page1.html',
      chunks: ['page1']
    }),
    new HtmlWebpackPlugin({
      template: './src/page2/index.html',
      filename: 'page2.html',
      chunks: ['page2']
    })
  ]
}

使用 React Router 实现伪多页面

虽然仍是单页应用，但可以通过路由模拟多页面体验：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />
      </Switch>
    </Router>
  );
}

创建独立 React 应用

为每个页面创建独立的 React 应用结构：

react 实现多页面开发

project/
├── page1/
│   ├── public/
│   ├── src/
│   └── package.json
└── page2/
    ├── public/
    ├── src/
    └── package.json

使用 Next.js 框架

Next.js 原生支持多页面路由，文件系统即路由：

pages/
├── index.js       → /
├── about.js       → /about
└── products/
    └── [id].js    → /products/:id

静态站点生成方案

使用 Gatsby 等静态站点生成器创建多页面：

// gatsby-node.js
exports.createPages = async ({ actions }) => {
  const { createPage } = actions
  createPage({
    path: "/page1",
    component: require.resolve("./src/templates/page1.js"),
  })
}

每种方法适用于不同场景：Webpack 配置适合自定义需求，React Router 适合SPA内的多视图，独立应用适合完全分离的页面，Next.js/Gatsby 提供开箱即用的解决方案。选择取决于项目复杂度、SEO需求和技术偏好。