react如何渲染多个页面
渲染多个页面的方法
在React中渲染多个页面通常涉及路由管理。React本身是一个单页应用（SPA）框架，但可以通过以下方式实现多页面效果：
使用React Router
React Router是处理多页面导航的标准库。安装后通过BrowserRouter、Route等组件定义路由：
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>
);
}动态路由配置
对于大量页面，可通过数组动态生成路由：
const routes = [
{ path: '/', component: HomePage },
{ path: '/products', component: ProductList },
{ path: '/products/:id', component: ProductDetail }
];
function App() {
return (
<Router>
<Switch>
{routes.map((route, i) => (
<Route key={i} {...route} />
))}
</Switch>
</Router>
);
}代码分割与懒加载
使用React.lazy和Suspense实现按需加载，优化性能：
const AboutPage = React.lazy(() => import('./AboutPage'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<Route path="/about" component={AboutPage} />
</Suspense>
);
}服务端渲染（SSR）
通过Next.js等框架实现服务端渲染的多页面应用：
// Next.js页面文件
// pages/about.js
export default function About() {
return <div>About Page</div>;
}静态页面生成
使用Gatsby等静态站点生成器，将React组件预渲染为HTML文件：
// Gatsby页面组件
// src/pages/index.js
export default function Home() {
return <h1>Home Page</h1>;
}多入口配置（Webpack）
修改Webpack配置生成多个HTML入口：
module.exports = {
entry: {
main: './src/index.js',
about: './src/about.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
chunks: ['main'],
filename: 'index.html'
}),
new HtmlWebpackPlugin({
template: './src/about.html',
chunks: ['about'],
filename: 'about.html'
})
]
};每种方法适用于不同场景，SPA应用推荐React Router，需要SEO则选择Next.js或Gatsby。
