react 如何跳转
React 路由跳转方法
在 React 中实现页面跳转通常依赖于路由库，最常用的是 react-router-dom。以下是几种常见的跳转方式：
1. 使用 Link 组件跳转Link 是 react-router-dom 提供的组件，用于声明式导航：
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/target-path">跳转到目标页</Link>
);
}2. 使用 useNavigate Hook
适用于函数组件，通过编程式导航控制跳转：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path'); // 跳转
navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}3. 类组件中使用 withRouter
若使用类组件，可通过高阶组件 withRouter 获取导航方法：
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);4. 重定向跳转
使用 Navigate 组件实现条件跳转：
import { Navigate } from 'react-router-dom';
function ProtectedPage({ isLoggedIn }) {
return isLoggedIn ? <div>Protected Content</div> : <Navigate to="/login" />;
}注意事项
- 确保项目已安装
react-router-dom（v6 及以上版本）。 - 路由跳转前需正确定义路由配置（如
BrowserRouter和Routes）。 - 传递参数可通过 URL 参数（
/path/:id）或状态（navigate('/path', { state: { key: value } })）。
