react 如何实现多页面

使用 React Router 实现多页面

React 本身是单页应用（SPA）框架，但可以通过 React Router 模拟多页面体验。安装 react-router-dom 后，配置路由表：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

配置多入口打包

通过修改 Webpack 配置实现真正的多页面应用。在 webpack.config.js 中设置多个入口点：

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

静态 HTML 模板

为每个页面创建单独的 HTML 模板文件，使用 html-webpack-plugin 为每个入口生成对应的 HTML：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/home.html',
      filename: 'home.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      template: './src/about.html',
      filename: 'about.html',
      chunks: ['about']
    })
  ]
};

服务端渲染方案

使用 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>;
}

静态站点生成

对于内容固定的页面，可采用 Gatsby 等静态站点生成方案。通过创建多个页面组件实现：

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

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

动态加载页面组件

在大型应用中，使用动态导入实现按需加载：

const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}