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