使用react-router-dom中的Link组件：

<Link to="/profile">View profile</Link>

还可以查看docs，它们提供了大量示例

您可以调用useHistory()钩子进行导航。

import { useHistory } from "react-router-dom";

const yourComponent = () => {
  const history = useHistory();
  viewProfile = function() {
    history.push("/new-url");
  };
  return (
    <Button color="primary" onClick={viewProfile}>
      View Profile
    </Button>
  );
};

如果您使用的是类组件，则可以将其 Package 为withRouter()以访问同一个history对象。

import React from "react";
import { withRouter } from "react-router";

class YourComponent extends React.Component {
  viewProfile = function() {
    const { history } = this.props;
    history.push("/new-url");
  };

  render() {
    return (
      <Button color="primary" onClick={this.viewProfile}>
        View Profile
      </Button>
    );
  }
}

export default withRouter(YourComponent);

React Router附带了一个Link组件，可以用于此目的，只需导入它，在to属性中设置目的地，然后用它 Package 您的Button即可：

import { Link } from "react-router-dom";

<Link to='/profile-page'>
   <Button color='primary' onClick={e => this.viewProfile()}>View Profile</Button>
</Link>

viewProfile = function () {
    console.log("clicked");
}

看看React路由器docs，他们有很多有用的信息！

添加这个解决了我的问题。

import { Redirect } from 'react-router'

      state = {
          redirect: false
         }

        const { redirect } = this.state;

        if (redirect) {
          return <Redirect to='/profile-page'/>;
        }

      viewProfile = function () {
          console.log("clicked");
          this.setState({ redirect: true })
      }

感谢“tarzenchugh”和“好撒玛利亚人"的回复

当你第一次学习一个新的框架时，命名法很重要：）
严格来说redirect将
渲染<Redirect>将导航到新位置。新位置将覆盖历史堆栈中的当前位置
您需要的是 * 导航 * 到个人资料页面。有两种方法可以实现这一点
1.通过JSX Link。
1.以编程方式使用history对象。

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Test extends Component{
  constructor(props){
    super(props);
    this.state ={}
  }
  
  viewProfile = () => {
    const {history} = this.props;
    history.push('profile-page');
  }
}

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Test extends Component{
  constructor(props){
    super(props);
    this.state ={}
  }
  
  viewProfile = () => {
    const {history} = this.props;
    history.push('profile-page');
  }
  render(){
    return(
      <Button
        color='primary'
        onClick={() => this.viewProfile()}>
        View Profile
      />
    );
  }
}
export default withRouter(Test);

使用react-router-dom中的useNavigate钩子，这是一个简单的解决方案

import { useNavigate } from "react-router-dom"

const navigate = useNavigate();

const navigateDashboard = (event) => {
    navigate("/dashboard");
};

<Button color='primary' onClick={navigateDashboard}>View Profile</Button>

这里你可以使用withRouter HOC来重定向。

import { withRouter } from "react-router";

class Component extends React.Component {
  viewProfile = function () {
     console.log("clicked");
     this.props.history.push('/main');
  }

  render(){
    return (
       <Button color='primary' onClick={e => this.viewProfile()}>View Profile</Button>        
    )
  }

}
export default withRouter(Component);

参考：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

这样做：-

<Button color='primary' onClick={() => this.viewProfile()}>View Profile</Button>

viewProfile= () => {
      return (
        <Redirect
          to={{
            pathname: "/profile-page",
          }}
        />
      );
  };