react如何写跳转
React 路由跳转方法
在 React 中实现页面跳转通常使用 react-router-dom 库，以下是几种常见的跳转方式：
使用 Link 组件
Link 是 react-router-dom 提供的导航组件，类似于 HTML 的 <a> 标签，但不会触发页面刷新：
import { Link } from 'react-router-dom';
function NavBar() {
return (
<nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}使用 useNavigate Hook
在函数组件中，可以使用 useNavigate Hook 进行编程式导航：
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}>Go to Target</button>;
}使用 history 对象（v5及以下版本）
在 React Router v5 及更早版本中，可以通过 history 对象跳转：
// 类组件中
this.props.history.push('/target-path');
// 通过withRouter高阶组件
import { withRouter } from 'react-router-dom';
const MyComponent = ({ history }) => (
<button onClick={() => history.push('/target')}>Go</button>
);
export default withRouter(MyComponent);路由重定向
使用 Navigate 组件或 useNavigate 实现条件重定向：
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}路由参数传递
跳转时可以通过 URL 参数或状态传递数据：
// URL参数
navigate('/user/123');
// 查询参数
navigate('/search?query=react');
// 状态对象
navigate('/detail', { state: { id: 123 } });注意事项
- 确保项目已安装
react-router-dom（最新推荐 v6+版本） - 应用最外层需要用
<BrowserRouter>或<HashRouter>包裹 - 路径匹配规则在 v6 版本有较大变化，需注意版本差异
- 动态路由参数需在目标组件中用
useParams获取
