react中如何进行路由跳转
使用 react-router-dom 进行路由跳转
在 React 中，路由跳转通常通过 react-router-dom 库实现。以下是常见的几种方法：
使用 Link 组件
Link 是 react-router-dom 提供的组件，用于声明式导航。它会在不刷新页面的情况下更新 URL 和渲染对应的组件。
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<Link to="/target-path">跳转到目标页面</Link>
);
}使用 useNavigate Hook
useNavigate 是 React Router v6 中推荐的编程式导航方法，可以动态触发路由跳转。
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path');
// 可选参数：替换当前历史记录
// navigate('/target-path', { replace: true });
};
return <button onClick={handleClick}>跳转</button>;
}使用 Navigate 组件
Navigate 组件用于在渲染时直接触发重定向，适用于条件跳转（如权限校验）。
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
return isAuthenticated ? <MyPage /> : <Navigate to="/login" />;
}传递参数
路由跳转时可以通过 URL 参数、查询参数或状态传递数据：
- URL 参数（需在路由配置中定义动态段）：
navigate('/user/123'); // 跳转到动态路由 /user/:id - 查询参数：
navigate('/search?keyword=react'); // 通过 useSearchParams 获取 - 状态对象：
navigate('/target', { state: { from: '/previous-page' } }); // 通过 useLocation 获取
注意事项
- 确保项目已安装
react-router-dom（v6 或更高版本）。 - 路由配置需在根组件中使用
<BrowserRouter>或<MemoryRouter>包裹。 - 编程式导航通常用于事件回调或副作用中，避免在渲染函数中直接调用。
以上方法覆盖了 React 中路由跳转的主要场景，可根据具体需求选择合适的方式。
