在React Router中,您可以使用以下方法从组件内部调用函数:
useHistory
钩子(适用于函数组件)如果您的组件是一个函数组件,可以使用useHistory
钩子从组件内部调用函数。useHistory
钩子提供了history
对象,您可以使用该对象导航到不同的路由。
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
// 调用您需要的函数
console.log('Function called!');
// 导航到其他路由
history.push('/another-route');
};
return (
<button onClick={handleClick}>点击我</button>
);
}
withRouter
高阶组件(适用于类组件)如果您正在使用类组件,可以使用withRouter
高阶组件将history
对象作为属性传递给组件。
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class MyComponent extends Component {
handleClick = () => {
// 调用您需要的函数
console.log('Function called!');
// 导航到其他路由
this.props.history.push('/another-route');
};
render() {
return (
<button onClick={this.handleClick}>点击我</button>
);
}
}
export default withRouter(MyContext);
请注意,useHistory
钩子仅适用于函数组件,而withRouter
高阶组件适用于类组件。根据您的组件类型选择合适的方法。
领取专属 10元无门槛券
手把手带您无忧上云