react如何页面跳转
React 页面跳转方法
在 React 中实现页面跳转可以通过多种方式，以下是常见的几种方法：
使用 React Router 的 Link 组件
通过 react-router-dom 提供的 Link 组件实现声明式导航：
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<Link to="/target-path">跳转到目标页</Link>
);
}使用 useNavigate Hook（React Router v6）
在函数组件中通过编程式导航实现跳转：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path');
// 可附加状态
navigate('/target-path', { state: { data: 'value' } });
};
return <button onClick={handleClick}>跳转</button>;
}使用 history.push（React Router v5）
在旧版本中通过 history 对象实现跳转：
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
history.push('/target-path');
};
return <button onClick={handleClick}>跳转</button>;
}使用重定向组件
通过 <Navigate> 组件实现条件跳转：
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
return isAuthenticated ? <MyPage /> : <Navigate to="/login" />;
}外部链接跳转
对于非路由链接（如外部URL），直接使用 <a> 标签：
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
外部链接
</a>注意事项
- 确保项目已安装
react-router-dom（当前推荐 v6 版本） - 路由配置需在根组件中完成（如
<BrowserRouter>） - 编程式导航可传递
state参数，目标页面通过useLocation获取 - 动态路由参数通过
/path/:id形式定义，跳转时填写实际值（如/items/123）
