How to use the react-router-dom.useNavigate function in react-router-dom

export default function ReportHistory() {
  const navigate = useNavigate()
  const { t } = useTranslation()
  const { data, isLoading, error } = useClientRequest((reqConfig) =>
    client.getInstance().diagnoseReportsGet(reqConfig)
  )
  const columns = useMemo(() => tableColumns(t), [t])

  const handleRowClick = usePersistFn(
    (rec, _idx, ev: React.MouseEvent) => {
      openLink(`/system_report/detail?id=${rec.id}`, ev, navigate)
    }
  )

  return (

export default function StatementsTable({ controller, ...restPrpos }: Props) {
  const {
    orderOptions,
    changeOrder,
    validTimeRange: { begin_time, end_time },
    loadingStatements,
    statements,
    errors,
    tableColumns,
    visibleColumnKeys,
  } = controller

  const navigate = useNavigate()
  const handleRowClick = usePersistFn(
    (rec, _idx, ev: React.MouseEvent) => {
      const qs = DetailPage.buildQuery({
        digest: rec.digest,
        schema: rec.schema_name,
        beginTime: begin_time,
        endTime: end_time,
      })
      openLink(`/statement/detail?${qs}`, ev, navigate)
    }
  )

  const getKey = useCallback((row) => `${row.digest}_${row.schema_name}`, [])

  return (

const SearchField: React.FC = () => {
  const { workflows } = useAppContext();
  const navigate = useNavigate();
  const options = searchIndexes(workflows);
  const [inputValue, setInputValue] = React.useState("");
  const [showOptions, setShowOptions] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  const renderResult = (option: SearchIndex) => {
    const handleSelection = () => {
      navigate(option.path);
    };

    return ;
  };

  const onInputChange = (__: React.ChangeEvent<{}>, value: string) => {
    if (value === "") {
      setShowOptions(false);

export default function TableDataView() {
  const { db, table } = useQueryParams()
  const [pageNum, setPageNumb] = useState(1)
  const navigate = useNavigate()
  const { t } = useTranslation()
  const [form] = Form.useForm()
  const [isLoading, setIsLoading] = useState(true)
  const [tableInfo, setTableInfo] = useState()
  const [formModalVisible, setFormModalVisible] = useState(false)
  const [confirmModalVisible, setConfirmModalVisible] = useState(false)
  const [modalInfo, setModalInfo] = useState({
    type: '',
    title: '',
    message: '',
    rowInfo: {},
  })

  const showFormModal = (info) => () => {
    const modalType = info.type
    switch (modalType) {

const StartExperiment: React.FC = ({
  heading,
  upstreamClusterTypeSelectionEnabled = false,
  hostsPercentageBasedTargetingEnabled = false,
}) => {
  const navigate = useNavigate();
  const [error, setError] = useState(undefined);
  const [experimentData, setExperimentData] = useState(undefined);

  const handleOnCreatedExperiment = (id: number) => {
    navigate(`/experimentation/run/${id}`);
  };

  const handleOnCreatedExperimentFailure = (err: ClutchError) => {
    setExperimentData(undefined);
    setError(err);
  };

  const createExperiment = (data: ExperimentData) => {
    const isUpstreamEnforcing = data.upstreamClusterType === UpstreamClusterType.INTERNAL;
    const isTargetingRequests = data.targetType === TargetType.REQUESTS;
    const isTargetingHosts = data.targetType === TargetType.HOSTS;

export default function SearchHeader({ taskGroupID }: Props) {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const [form] = Form.useForm()
  const [isSubmitting, setSubmitting] = useState(false)
  const instanceSelect = useRef(null)

  useMount(() => {
    async function fetchData() {
      if (!taskGroupID) {
        return
      }
      const res = await client
        .getInstance()
        .logsTaskgroupsIdGet(String(taskGroupID))
      const { task_group, tasks } = res.data
      const { start_time, end_time, min_level, patterns } =
        task_group?.search_request ?? {}
      const fieldsValue: IFormProps = {

export default function () {
  const { t } = useTranslation()
  const navigate = useNavigate()

  const { data, isLoading, sendRequest } = useClientRequest((cancelToken) => {
    return client.getInstance().metricsGetAlerts({ cancelToken })
  })

  const { data: amData } = useClientRequest((cancelToken) =>
    client.getInstance().getAlertManagerTopology({ cancelToken })
  )

  const handleAlertManagerLinkClick = useCallback(() => {
    if (amData) {
      window.open(`http://${amData.ip}:${amData.port}`)
    }
  }, [amData])

  const handleRefresh = useCallback(() => {

const ExperimentDetails: React.FC = ({
  upstreamClusterTypeSelectionEnabled,
  hostsPercentageBasedTargetingEnabled,
  onStart,
}) => {
  const initialExperimentData = {
    upstreamClusterType: UpstreamClusterType.INTERNAL,
    faultType: FaultType.ABORT,
    targetType: TargetType.REQUESTS,
  } as ExperimentData;

  const experimentDataState = useState(initialExperimentData);

  const experimentData = experimentDataState[0];
  const navigate = useNavigate();

  const handleOnCancel = () => {
    navigate("/experimentation/list");
  };

  const handleOnSubmit = () => {
    onStart(experimentData);
  };

  const faultInjectionClusterRadioGroup = {
    name: "upstreamClusterType",
    label: "Upstream Cluster Type",
    type: "radio-group",
    visible:
      upstreamClusterTypeSelectionEnabled && experimentData.targetType === TargetType.REQUESTS,
    inputProps: {

const ListExperiments: React.FC = ({ heading, columns, links }) => {
  const [experiments, setExperiments] = useState<
    IClutch.chaos.experimentation.v1.ListViewItem[] | undefined
  >(undefined);
  const [error, setError] = useState(undefined);

  const navigate = useNavigate();

  const handleRowSelection = (event: any, item: IClutch.chaos.experimentation.v1.ListViewItem) => {
    navigate(`/experimentation/run/${item.id}`);
  };

  React.useEffect(() => {
    client
      .post("/v1/chaos/experimentation/getListView")
      .then(response => {
        setExperiments(response?.data?.items || []);
      })
      .catch((err: ClutchError) => {
        setError(err);
      });
  }, []);

export default function ListPage() {
  const { tabKey } = useParams()
  const navigate = useNavigate()
  const { t } = useTranslation()

  return (
    
      
         {
            navigate(`/cluster_info/${key}`)
          }}
          renderTabBar={renderTabBar}
          animated={false}
        >