如何基于点击反应更改路线

Question

我正在调用API来获取数据，我正在以表格格式显示该数据。 我的目的是在用户单击任何表格单元格并将数据传递给该路由时更改路由，以便我可以使用它来过滤API数据并显示与该帐号相关的特定数据 我不知道如何实现它，任何人都可以帮助我。

这是我的代码文件

import React, { Component } from "react";
import $ from "jquery";
import "./../css/index.css";
import { BrowserRouter as Router, Switch, Route, Link,Redirect } from "react-router-dom";

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = { //state is by default an object
      accounts : []
   }
  }

  componentDidMount = async () => {
    let _this = this;
    $("table").on("click", "td", function(e) {
      var region = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
      var account = this.parentNode.cells[0];
      console.log([$(account).text(), $(region).text()]);
    });
    const response = await fetch(
      "https://cors-anywhere.herokuapp.com/https://905dpx1sm3.execute-api.us-east-1.amazonaws.com/prod/account_info",
      {
        headers: {
          "x-api-key": "EEpDixlDSO7J3eHjahLZZ1EQjwNzPa8f2ritb3fn"
        }
      }
    );

    const data = await response.json();
    this.setState({ accounts:data });
    $(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
  };
  renderTableData() {
    return this.state.accounts.map((account, index) => {
       const { environment, account_number, bu,account_alias,resource_name } = account; //destructuring
       const regions = account.regions;
       return (
          <tr key={index}>
             <td className="fixed-side">{account_number}</td>
             <td className="fixed-side">{account_alias}</td>
             <td className="fixed-side">{environment}</td>
             <td className="fixed-side">{bu}</td>
             <td>{regions['us-east-1']}</td>

          </tr>
       )
    })
  }
  render() {
    return (
      <div className="wrapper">
        <div id="table-scroll" className="table-scroll">
          <div className="table-fixed-right table-wrap">
            <table className="main-table">
              <thead>
                <tr>
                  <th className="fixed-side" scope="col">Account Number</th>
                  <th className="fixed-side" scope="col">Account Alias</th>
                  <th className="fixed-side" scope="col">Environment</th>
                  <th  className="fixed-side" scope="col">BU</th>
                </tr>
              </thead>
          <tbody>
            {this.renderTableData()}
          </tbody>
        </table>
      </div>
    </div>
    </div>
    );
  }
}

export default Table;