react如何实现页面跳转
React 页面跳转的实现方式
React 中实现页面跳转主要有以下几种方法，适用于不同场景：
使用 React Router 的 Link 组件
适用于声明式导航，通常在组件内直接使用：
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<Link to="/target-path">跳转到目标页</Link>
);
}使用 useNavigate Hook（React Router v6）
适用于函数组件中的编程式导航：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path'); // 跳转基础路径
navigate('/target-path', { state: { data: 'value' } }); // 带状态跳转
navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}使用 history.push（React Router v5）
适用于类组件或旧版本路由：
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);使用 Redirect 组件（条件跳转）
适用于需要满足条件后自动跳转的场景：
import { Redirect } from 'react-router-dom';
function ProtectedPage({ isAuthenticated }) {
if (!isAuthenticated) {
return <Redirect to="/login" />;
}
return <div>受保护内容</div>;
}注意事项
- 路由配置：确保在根组件中已配置好路由（如
BrowserRouter和Routes）。 - 动态路径：跳转时可通过模板字符串传递动态参数：
navigate(`/user/${userId}`); - URL 参数：通过
useSearchParams处理查询参数：const [searchParams] = useSearchParams(); navigate(`/search?query=${searchParams.get('query')}`);
根据项目需求选择合适的跳转方式，React Router 的官方文档提供了更详细的参数和配置选项。
