react如何页面跳转
React 页面跳转方法
在 React 中实现页面跳转有多种方式，具体取决于项目使用的路由库（如 React Router）或状态管理工具。以下是常见的几种方法：
使用 React Router 的 Link 组件
React Router 提供了 Link 组件，用于声明式导航。适用于需要保留应用状态的无刷新跳转。
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/target-page">跳转到目标页</Link>
);
}使用 useNavigate Hook（React Router v6）
在函数组件中，可以通过 useNavigate Hook 实现编程式导航：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-page'); // 跳转基础路径
navigate('/target-page', { state: { data: 123 } }); // 带状态跳转
navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}使用 history.push（React Router v5）
在旧版 React Router 中可通过 history 对象操作：
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
history.push('/target-page');
};
return <button onClick={handleClick}>跳转</button>;
}原生 JavaScript 跳转
如果需要完全离开当前应用（如跳转外部链接），可使用原生方法：
window.location.href = 'https://example.com'; // 页面级跳转
window.open('https://example.com', '_blank'); // 新标签页打开路由参数传递
跳转时可通过 URL 参数或状态传递数据：
// URL 参数
navigate('/user/123');
// 查询参数
navigate('/user?id=123');
// 状态传递
navigate('/user', { state: { id: 123 } });注意事项
- 使用 React Router 前需正确配置路由（
BrowserRouter/Routes/Route）。 - 编程式导航通常用于表单提交后跳转等逻辑场景。
- 外部链接跳转会触发页面刷新，导致 React 应用状态丢失。
