当前位置：首页 > React

react 如何实现多页面

2026-01-24 10:51:01React

实现多页面应用的方法

在React中实现多页面应用（MPA）通常需要结合路由工具或构建工具。以下是几种常见方法：

使用React Router实现客户端路由

React Router是React生态中最常用的路由库，适合单页应用（SPA）中的多页面切换：

react 如何实现多页面

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contact" element={<ContactPage />} />
      </Routes>
    </BrowserRouter>
  );
}

使用Webpack多入口配置

对于需要完全独立的HTML页面的MPA，可以配置Webpack的多入口：

// webpack.config.js
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js',
    contact: './src/contact.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

使用Next.js框架

Next.js提供了开箱即用的多页面支持，既支持SPA也支持SSR/SSG：

react 如何实现多页面

// pages/index.js
export default function Home() {
  return <div>Home Page</div>;
}

// pages/about.js
export default function About() {
  return <div>About Page</div>;
}

静态HTML页面生成

对于简单的静态网站，可以生成多个HTML文件：

// build.js
const fs = require('fs');
const pages = ['home', 'about', 'contact'];

pages.forEach(page => {
  const html = `
    <!DOCTYPE html>
    <html>
      <head><title>${page}</title></head>
      <body>
        <div id="root"></div>
        <script src="${page}.bundle.js"></script>
      </body>
    </html>
  `;
  fs.writeFileSync(`dist/${page}.html`, html);
});

服务端渲染方案

使用Express等Node框架处理不同路由：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/views/home.html');
});

app.get('/about', (req, res) => {
  res.sendFile(__dirname + '/views/about.html');
});

每种方法适用于不同场景：React Router适合SPA，Webpack多入口适合传统MPA，Next.js提供最完整的解决方案，而服务端渲染适合需要SEO优化的项目。选择时应考虑项目规模、SEO需求和团队技术栈。