react如何跳转路由
React 路由跳转方法
在 React 中实现路由跳转通常使用 react-router-dom 库。以下是几种常见的路由跳转方式：
使用 Link 组件
Link 是 react-router-dom 提供的组件，用于声明式导航。它会在不刷新页面的情况下更新 URL 和渲染匹配的组件。
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/about">跳转到 About 页面</Link>
);
}使用 useNavigate Hook
在函数组件中，可以使用 useNavigate Hook 进行编程式导航。这种方式适用于需要在某些操作（如提交表单）后跳转路由的场景。
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about');
};
return (
<button onClick={handleClick}>跳转到 About 页面</button>
);
}使用 history.push（适用于 React Router v5）
在 React Router v5 中，可以通过 history 对象进行路由跳转。
import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
const handleClick = () => {
history.push('/about');
};
return (
<button onClick={handleClick}>跳转到 About 页面</button>
);
}带参数跳转
路由跳转时可以传递参数，例如状态、查询参数或动态路由参数。
// 使用 useNavigate 传递状态
navigate('/about', { state: { userId: 123 } });
// 使用 Link 传递状态
<Link to="/about" state={{ userId: 123 }}>跳转</Link>
// 动态路由参数
navigate('/user/123');重定向
使用 Navigate 组件可以实现重定向功能。
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isLoggedIn }) {
return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;
}注意事项
- 确保项目已安装
react-router-dom（v6 或更高版本推荐）。 - 路由跳转前应确保目标路由已在路由配置中定义。
- 使用编程式导航时，注意处理可能的错误或异常情况。
以上方法适用于大多数 React 路由跳转场景，开发者可以根据具体需求选择合适的方式。
