react如何点击跳转路由
使用 React Router 进行路由跳转
在 React 中实现点击跳转路由通常使用 react-router-dom 库。以下是几种常见方法：
安装依赖
确保项目已安装 react-router-dom：
npm install react-router-dom使用 <Link> 组件
适用于常规导航链接，不会触发页面刷新：
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<Link to="/target-path">点击跳转</Link>
);
}使用 useNavigate Hook
适用于需要编程式导航的场景（如提交表单后跳转）：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path');
// 可选参数：navigate('/target-path', { replace: true });
};
return (
<button onClick={handleClick}>点击跳转</button>
);
}使用 withRouter HOC（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);路由参数传递
跳转时携带参数：
// 方式1：URL参数
navigate('/user/123');
// 方式2：查询参数
navigate('/user?id=123');
// 方式3：state传递
navigate('/user', { state: { id: 123 } });动态路由匹配
在路由配置中定义参数：
<Route path="/user/:id" element={<UserPage />} />在目标组件中获取参数：
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}注意事项
- 确保组件被
<BrowserRouter>或<Router>包裹 - React Router v6 移除了
withRouter，推荐使用 Hook - 路径匹配规则遵循
path-to-regexp库 - 使用
replace导航会替换历史记录而非添加新条目
以上方法适用于大多数 React 路由跳转场景，可根据具体需求选择合适的方式。
