react如何跳转页面
路由跳转（React Router）
在React中实现页面跳转通常使用React Router库。以下是几种常见方式：
安装React Router（v6版本）：
npm install react-router-dom声明式导航（推荐）
使用<Link>组件实现跳转，不会触发页面刷新：
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/about">关于页面</Link>
);
}编程式导航
在事件处理函数中使用useNavigate钩子：
import { useNavigate } from 'react-router-dom';
function HomePage() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about'); // 普通跳转
navigate('/about', { replace: true }); // 替换当前历史记录
navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}原生跳转方法
window.location 直接修改浏览器地址（会触发页面刷新）：
window.location.href = '/about';history API 使用浏览器原生API（需兼容性处理）：
window.history.pushState({}, '', '/about');路由参数传递
URL参数 通过路由配置传递参数：
navigate('/user/123'); // 跳转
// 路由配置
<Route path="/user/:id" element={<UserPage />} />
// 获取参数
import { useParams } from 'react-router-dom';
const { id } = useParams();状态参数 通过state传递复杂对象：
navigate('/about', {
state: { fromDashboard: true }
});
// 获取状态
import { useLocation } from 'react-router-dom';
const { state } = useLocation();注意事项
- 使用React Router时需确保组件被
<BrowserRouter>包裹 - 编程式导航通常在异步操作（如API请求）完成后执行
- 原生跳转会丢失React应用状态，推荐优先使用React Router
