React navigate router v6 invalid hook call

Edit: For react-router v6

In react-router v6 there is no withRouter nor useHistory. I would recommend to refactor your component to use hooks for the sake of simplicity, but an alternative solution is to create a wrapper component that will pass the navigate function obtained from the hook as a 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 is a hook and hooks can only be used inside "function" components.

However I can guess you are using it from a "class" component, since there are some this.state, so you cannot use the hook there.

Another approach that should work for you would be to wrap your component inside a 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)

The withRouter will inject the history as a prop.

In react-router-dom latest version(v6) you cannot use this.props.match.params.id and this.props.history (in react latest vesion history replace with navigate). Besides you cannot call them in class component. To call them in class component make a function first -

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

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

• I want to use it for ProductDetails component. That's given below -

   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);
  

• Here is my App module where I defined my routes -

       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;
  

• It works for me and hope it will help you.

You can only call hooks at the top level (https://reactjs.org/docs/hooks-rules.html) inside a component.

Therefore, this is invalid, being it's not only in an if statement, in a promise's .then function, and also does not appear to even be a functional component, rather, just a function:

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

I would instead attempt doing something like setting a flag, and then navigating based upon that flag:

  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);
  }

But I would avoid this altogether and simply utilize the useHistory hook to get an instance of history and work on that (I haven't tested this either but it should work):

  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" />;
        }
        
        
      })
              
  
        }
        
        
  }

Note: You have to do this directly in your component itself, you can't use hooks in a normal function that isn't a component.

you don't use useNavigate() in ordinary function