react如何渲染多个页面
渲染多个页面的方法
在React中渲染多个页面通常涉及路由配置和组件组织。以下是几种常见方法：
使用React Router
React Router是处理多页面应用最流行的库。安装后配置路由：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}动态路由匹配
通过参数化路径实现动态页面渲染：
<Route path="/users/:id" element={<UserProfile />} />在组件中通过useParams获取参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}嵌套路由
创建页面层级结构：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />} />
<Route path="analytics" element={<Analytics />} />
</Route>父组件中需使用<Outlet />渲染子路由：
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet />
</div>
);
}条件渲染
根据状态切换页面内容：
function App() {
const [currentPage, setCurrentPage] = useState('home');
return (
<div>
{currentPage === 'home' && <Home />}
{currentPage === 'about' && <About />}
</div>
);
}代码分割
优化大型应用性能，使用React.lazy动态加载页面：
const About = React.lazy(() => import('./About'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<About />
</Suspense>
);
}静态站点生成（SSG）
使用框架如Next.js预渲染页面：
// pages/about.js
export default function About() {
return <div>About Page</div>;
}Next.js会自动将pages目录下的文件转为路由。
注意事项
- 始终为根组件包裹
<BrowserRouter> - 生产环境考虑使用
<HashRouter>解决静态文件服务器路由问题 - 复杂路由结构建议使用路由配置文件集中管理
- 动态导入配合Suspense提升性能
