How to implement useNavigate from react-router-dom in a class based component

0
votes

I have to redirect user to the '/dashboard' after logging in. But I don't want to install react-router-dom v5.2.0 to use history.push(). Currently react-router-dom v6 is installed. Is there any other alternative to redirect user after signing in. Error message shows : er Cannot read properties of undefined (reading 'push').

class Auth extends Component { 
    constructor(props) {
        super(props);
        this.state = {
            tab: 'signin'
        }
    }
    SignIn = (email, password) => {
        axios.post('/api/users/login', {email, password}).then(res => {
            //console.log(res);
            if(res.data.success) {
                store.dispatch({
                    type: 'login',
                    _id: res.data.user._id,
                    user: res.data.user,
                    token: res.data.token
                });
                console.log(store.getState());
                // Problem arises here.
                this.props.history.push('/dashboard');               
            }
        }).catch(er => {
            if (er.response) {
                console.log(er.response.data);
                console.log(er.response.status);
                console.log(er.response.headers);
              } else if (er.request) {
                console.log(er.request);
              } else {
                console.log('er', er.message);
              }
              console.log(er.config);
        })     
    }
1
javascriptreactjsreduxreact-router-dom

1 Answers

0
votes

useNavigate is a react hook and as such can only be used in functional components. What you could do is pass navigate as a prop if your parent component is a functional component. Like so:

const ParentComponent = () => {
 const navigate = useNavigate(); 

 return <Auth navigation={navigate} /> //pass to your component.
}

You could then try to use it inside your component.