react router如何跳转
React Router 跳转方法
React Router 提供了多种方式进行页面跳转，以下是常见的几种方法：
使用 <Link> 组件
import { Link } from 'react-router-dom';
<Link to="/about">关于我们</Link>使用 useNavigate Hook
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about');
// 或者带状态跳转
navigate('/about', { state: { from: 'home' } });
};
return <button onClick={handleClick}>跳转</button>;
}编程式导航（类组件）
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
this.props.history.push('/about');
// 或者替换当前历史记录
this.props.history.replace('/about');
};
render() {
return <button onClick={this.handleClick}>跳转</button>;
}
}
export default withRouter(MyComponent);带参数跳转
// 动态路由跳转
navigate('/user/123');
// 查询参数跳转
navigate('/search?q=react');
// 状态传递
navigate('/user', { state: { id: 123 } });重定向
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isLoggedIn }) {
return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;
}注意事项
- 使用
useNavigate需要在函数组件中 - 类组件需要使用
withRouter高阶组件或通过 props 传递history - 跳转时可以传递 state 对象，但不会显示在 URL 中
- 动态路由需要在路由配置中定义对应模式（如
/user/:id）
