react是如何跳转的
React 路由跳转的几种方式
在 React 中，路由跳转通常通过 react-router-dom 库实现。以下是常见的几种跳转方式：
使用 Link 组件
import { Link } from 'react-router-dom';
<Link to="/target-path">跳转到目标页面</Link>使用 useNavigate Hook（React Router v6）
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/target-path')}>跳转</button>
);
}编程式导航（类组件）
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
this.props.history.push('/target-path');
};
render() {
return <button onClick={this.handleClick}>跳转</button>;
}
}
export default withRouter(MyComponent);重定向（Navigate 组件）
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
return isAuthenticated ? <MyComponent /> : <Navigate to="/login" />;
}路由跳转的参数传递
URL 参数
navigate('/user/123'); // 跳转到动态路由 /user/:id查询参数
navigate('/search?keyword=react'); // 跳转并带查询参数状态参数
navigate('/target', { state: { fromDashboard: true } });
// 目标组件通过 useLocation() 获取状态注意事项
- 确保项目已安装
react-router-dom（v5 或 v6 版本语法不同） - 路由跳转前需在根组件用
<BrowserRouter>包裹 - 在 v6 中，
useHistory被useNavigate取代 - 嵌套路由需配合
<Outlet />组件使用
路由守卫实现
通过高阶组件或自定义 Hook 实现权限控制：
function PrivateRoute({ children }) {
const auth = useAuth();
return auth ? children : <Navigate to="/login" />;
}
