编辑：对于React路由器v6

在react-router v6中没有withRouter和useHistory，为了简单起见，我建议重构您的组件以使用钩子，但另一种解决方案是创建一个 Package 器组件，将从钩子获得的导航函数作为prop传递：

import { useNavigate } from 'react-router-dom';

class MyComponent extends React.Component {
  //...
    PerformLogin = () => {
        const username = this.state.username;
        const password = this.state.password;
        // ...
        this.props.navigate('/crime');
    }
}

function WithNavigate(props) {
    let navigate = useNavigate();
    return <MyComponent {...props} navigate={navigate} />
}

export default WithNavigate

useHistory是一个钩子，钩子只能在“函数”组件内部使用。
但是我可以猜到您是从“类”组件使用它的，因为有一些this.state，所以您不能在那里使用钩子。
另一种可行的方法是将组件 Package 在withRouter中：

import { withRouter } from "react-router";

class MyComponent extends React.Component {
  //...
    PerformLogin = () => {
        const history = this.props.history;
        const username = this.state.username;
        const password = this.state.password;
        // ...
    }
}

export default withRouter(MyComponent)

withRouter将把历史作为一个 prop 注入。

在react-router-dom最新**版本（v6）**中，您不能使用this.props.match.params.id和this.props.history（在react最新版本中，将history替换为navigate）。此外，您不能在类组件中调用它们。要在类组件中调用它们，请先创建一个函数-

import { useParams, useNavigate } from "react-router-dom";

    export function withParamsAndNavigate(Component) {
      return (props) => (
       <Component {...props} params={useParams()} navigate={useNavigate()} />
  );
}

• 我想把它用在ProductDetails组件上。如下所示-

import { withParamsAndNavigate } from "./getParamsAndNavigate.js";

 class ProductDetails extends React.Component {
  state = {//}

render() {
 const{params,navigate} = this.props;
  // params.id - will return the id,
  // navigate('yourUrl') - will redirect the target url.
  return (
     //
   );
  }
 }

export default withParamsAndNavigate(ProductDetails);

• 这是我的App模块，我在其中定义了路由-

import React from "react";
     import { Routes, Route} from "react-router-dom";
     import Product from "./components/Product";
     import ProductDetails "./components/ProductDetails";

     function App() {
       return (
           <div>
              <main role='main' className='container'>
                <Routes>
                   <Route path='/product' element={<Product />} />
                   <Route path="/product/:id"} element={<ProductDetails />} />
                </Routes>
              </main>
          </div>
       );
      }
     export default App;

• 对我很有效，希望对你有帮助。

您只能在组件内部的顶层（https://reactjs.org/docs/hooks-rules.html）调用钩子。
因此，这是无效的，因为它不仅出现在if语句中，出现在promise的.then函数中，而且看起来甚至不是一个函数组件，而只是一个函数：

if (res.type) {
        console.log("navigating logged in");
        navigate.push('/crime');
        //return <Navigate to="/crime" />;
    }

我会尝试设置一个标志，然后根据该标志进行导航：

PerformLogin = () => {
        let navigate = useNavigate();
        let shouldNavigate = false;
        const username = this.state.username;
        const password = this.state.password;
        if (username === '') {
            console.log("please enter username");
        } else if (password === '') {
            console.log("please enter password");
        } else {
                  console.log("username of login: ",this.state.username);
                   axios.post(process.env.REACT_APP_DATAURL + `/login`,{ username: username, password: password },{withCredentials: true})
      .then(res => {
          res = res.data;
        console.log(res);
        console.log(res.data);
        if (res.type) {
            console.log("navigating logged in");
            shouldNavigate = true;
            //return <Navigate to="/crime" />;
        }
        
        
      })
              
  
        }
        
        navigate.push(shouldNavigate ? '/crime' : currentURL);
  }

但我会完全避免这种情况，而只是利用useHistory钩子来获取一个历史示例，并对其进行处理（我也没有测试，但它应该可以工作）：

PerformLogin = () => {
        const history = useHistory();
        const username = this.state.username;
        const password = this.state.password;
        if (username === '') {
            console.log("please enter username");
        } else if (password === '') {
            console.log("please enter password");
        } else {
                  console.log("username of login: ",this.state.username);
                   axios.post(process.env.REACT_APP_DATAURL + `/login`,{ username: username, password: password },{withCredentials: true})
      .then(res => {
          res = res.data;
        console.log(res);
        console.log(res.data);
        if (res.type) {
            console.log("navigating logged in");
            history.push('/crime');
            //return <Navigate to="/crime" />;
        }
        
        
      })
              
  
        }
        
        
  }

注意：你必须直接在你的组件本身中完成，你不能在一个不是组件的普通函数中使用钩子。

*An example of how you can use.useHsitory has not been working properly in v6

import React from 'react';
import { createBrowserHistory } from 'history';

const StatusCodeCat: React.FC = () => {
//   const history = useHistory();
  const hsitory = createBrowserHistory();
  console.log(hsitory);
  

  return (
    <div>
        never
    </div>
  );
}

export default StatusCodeCat;

在普通函数中不使用useNavigate()