如何react页面跳转
React 页面跳转方法
在 React 中实现页面跳转可以通过多种方式，具体取决于使用的路由库或原生方法。以下是常见的几种实现方式：
使用 React Router
React Router 是 React 生态中最流行的路由库，适用于单页面应用（SPA）的导航。
安装 React Router：
npm install react-router-dom在组件中使用 Link 或 useNavigate 进行跳转：
import { Link, useNavigate } from 'react-router-dom';
// 方法1：使用 Link 组件
<Link to="/target-path">跳转到目标页</Link>
// 方法2：使用 useNavigate 钩子
const navigate = useNavigate();
navigate('/target-path'); // 替换当前历史记录
navigate('/target-path', { replace: true }); // 添加新历史记录编程式导航
通过事件触发跳转，适用于表单提交或异步操作后的跳转：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path');
};
return <button onClick={handleClick}>跳转</button>;
}原生 JavaScript 跳转
如果不使用路由库，可以通过原生方法实现页面跳转：
// 当前页面跳转
window.location.href = '/target-path';
// 新标签页打开
window.open('/target-path', '_blank');路由参数传递
跳转时传递参数：
// 通过 URL 参数
navigate('/target-path?key=value');
// 通过状态
navigate('/target-path', { state: { key: 'value' } });目标页面接收参数：
import { useLocation } from 'react-router-dom';
const location = useLocation();
const params = new URLSearchParams(location.search);
const stateData = location.state;动态路由跳转
跳转到动态路由（如用户详情页）：
navigate(`/user/${userId}`);目标路由配置：
<Route path="/user/:id" element={<UserDetail />} />注意事项
- 使用 React Router 时确保组件被
<BrowserRouter>或<Router>包裹 - 编程式导航通常在事件处理或副作用（如
useEffect）中调用 - 原生跳转会触发页面刷新，破坏 SPA 体验
- 路径可以是相对路径（如
'../parent-path'）或绝对路径（如'/target-path'）
以上方法覆盖了 React 中大多数页面跳转场景，开发者可根据具体需求选择合适方案。
