react如何确定页面跳转

React 页面跳转的实现方式

在 React 中实现页面跳转通常依赖于路由库（如 React Router）或编程式导航。以下是几种常见方法：

使用 React Router 的 <Link> 组件 通过 <Link> 组件实现声明式导航，适用于需要用户点击触发的跳转：

import { Link } from 'react-router-dom';
<Link to="/target-path">跳转到目标页</Link>

编程式导航（useNavigate Hook） 在函数组件中通过 useNavigate 实现动态跳转：

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/target-path'); // 可添加状态：{ state: { data } }

路由参数传递 通过 URL 参数或状态传递数据：

// 跳转时传递参数
navigate('/user/123'); // 动态路由
navigate('/profile', { state: { user: 'name' } }); // 隐藏状态

// 目标页获取参数
const { id } = useParams(); // 获取URL参数
const { state } = useLocation(); // 获取状态

重定向（Redirect 组件） 条件渲染时使用 <Navigate> 组件实现重定向：

import { Navigate } from 'react-router-dom';
{ isLoggedIn ? <Dashboard /> : <Navigate to="/login" /> }

注意事项

• 确保项目已安装 react-router-dom（v6+推荐）。
• 路由配置需在根组件包裹 <BrowserRouter>。
• 动态路由需在路由配置中定义（如 /user/:id）。
• 编程式导航可附加 replace: true 选项替换历史记录而非新增。