react如何切换页面
React 切换页面的方法
在 React 中切换页面通常通过路由（Routing）实现，以下是常见的几种方式：
使用 React Router
React Router 是 React 生态中最流行的路由库，支持动态路由和嵌套路由。
安装 React Router：
npm install react-router-dom基本路由配置示例：
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}编程式导航
通过 useNavigate Hook 实现页面跳转：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/about')}>
Go to About
</button>
);
}动态路由与参数传递
通过 URL 参数传递数据：
<Route path="/user/:id" element={<UserProfile />} />
// 跳转时传递参数
navigate('/user/123');
// 组件内获取参数
const { id } = useParams();条件渲染实现页面切换
对于简单的 SPA 应用，可通过状态控制组件渲染：
function App() {
const [page, setPage] = useState('home');
return (
<>
{page === 'home' && <Home />}
{page === 'about' && <About />}
<button onClick={() => setPage('about')}>Switch</button>
</>
);
}注意事项
- React Router v6 使用
Routes替代旧版的Switch - 嵌套路由需配合
<Outlet />组件使用 - 服务端渲染项目需考虑兼容方案（如 Next.js 的路由系统）
