react 如何跳转
路由跳转方法
在React中实现页面跳转通常依赖react-router-dom库（v5/v6）。以下是常见跳转方式：
编程式导航（useNavigate Hook）
import { useNavigate } from 'react-router-dom';
function Component() {
const navigate = useNavigate();
// 跳转到指定路径
const handleClick = () => navigate('/target-path');
// 带参数跳转
const withParams = () => navigate('/user?id=123', { state: { from: 'home' } });
// 返回上一页
const goBack = () => navigate(-1);
}声明式导航（Link组件）
import { Link } from 'react-router-dom';
<Link to="/about">关于页面</Link>
<Link to="/profile" state={{ user: data }}>带状态跳转</Link>路由参数传递
// 跳转时传递参数
navigate('/user/123');
// 目标组件接收参数
import { useParams } from 'react-router-dom';
const { id } = useParams();路由重定向
组件内重定向
import { Navigate } from 'react-router-dom';
function PrivateRoute({ auth }) {
return auth ? <Dashboard /> : <Navigate to="/login" replace />;
}路由配置重定向（v6）
const routes = [
{ path: '/', element: <Home /> },
{ path: '/old', element: <Navigate to="/new" replace /> }
];注意事项
- 使用
replace属性可避免历史记录堆叠 - 类组件需通过
withRouter高阶组件或useNavigate封装实现导航 - 路径参数需在路由配置中定义匹配模式（如
/user/:id）
