react如何路由跳转
React 路由跳转方法
在 React 中实现路由跳转通常使用 react-router-dom 库。以下是几种常见的路由跳转方式：
使用 Link 组件
Link 是 react-router-dom 提供的组件，用于声明式导航，类似于 HTML 的 <a> 标签但不会触发页面刷新。
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'); // 跳转到指定路径
navigate(-1); // 返回上一页
navigate('/about', { replace: true }); // 替换当前历史记录
};
return <button onClick={handleClick}>跳转</button>;
}使用 history 对象（v5 及以下版本）
在 react-router-dom v5 及更早版本中，可通过 history 对象跳转：
import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
const handleClick = () => {
history.push('/about'); // 跳转并保留历史记录
history.replace('/about'); // 替换当前历史记录
};
return <button onClick={handleClick}>跳转</button>;
}路由传参
跳转时可通过 URL 参数、状态或查询字符串传递数据：
// URL 参数（需在路由配置中定义动态参数）
navigate('/user/123');
// 状态传递
navigate('/about', { state: { id: 1 } });
// 查询字符串
navigate('/about?name=John');重定向
使用 Navigate 组件实现条件重定向：
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isLoggedIn }) {
return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;
}注意事项
- 确保项目已安装
react-router-dom（v6 或更高版本推荐）。 - 路由跳转前需在根组件中配置好路由（如
BrowserRouter和Routes）。 - 传递的状态数据在页面刷新后会丢失，需结合本地存储或状态管理工具持久化。
以上方法覆盖了 React 中大多数路由跳转场景，可根据具体需求选择合适的方式。
