从react路由中的组件调用函数

在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高阶组件适用于类组件。根据您的组件类型选择合适的方法。