. Advertisement .
..3..
. Advertisement .
..4..
Hello everyone! Today we continue to start a new lesson! During project run, have you encountered this “TypeError: history.push is not a function” situation? Have you solved it yet? If not, continue to follow this article to find the solution right away!
What is “TypeError: history.push is not a function”?
The error occurs when the coder has created two forms and the purpose is to direct the user back to the homepage when the form has been completed, which is handleSubmit. The error displayed is as follows: TypeError: history.push is not a function
Below is the program that the coder created:
import { withRouter } from "react-router-dom";
import firebase from "firebase/app";
const Session = ({ id }) => {
const classes = useStyles();
....other codes above
const handleSubmit = (e) => {
e.preventDefault();
try {
const userRef = firestore.collection("users").doc(id);
const ref = userRef.set(
{
items: {
id,
...variable names here
},
},
{ merge: true }
);
console.log(" saved");
stocksCounter();
history.push("/"); <-- history.push
} catch (err) {
console.log(err);
}
};
//2nd submit-----------------------------------------------------------
...other codes here
const handleSubmit2 = (e) => {
e.preventDefault();
try {
const userRef = firestore.collection("users").doc(scanResult);
const ref = userRef.set(
{
items: {
..variable names here
},
},
{ merge: true }
);
console.log(" saved");
stocksCounter();
} catch (err) {
console.log(err);
}
};
return (
....codes here
);
};
export default withRouter(Session);
Simple solutions for this error
Solution 1
JavaScript provides many ways to redirect the user to another web page, if during program execution you need to go to another page. react-router-dom is a library for navigating urls to components (roughly) in react js. In this library useHisrtory is used to change the url, for example when you are on the login screen for example. To use React-router-dom’s Router, we have to pass it history (this field is required), this is the prop to use for the useHistory we are talking about.
As such, you can apply useHistory in your program, like this:
const history = useHistory();
history.push('/')
Solution 2
The old useHistory has been replaced by useNavigate with new v6 command:
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(`/Search?${queryString}`);
Solution 3
Wrappe the Navigation component with withRouter
-> access the history object via the component’s props
function Navigation({ history }) {
const abc = path => {
history.push(path);
};
return (
<button onClick={() => abc('/user')}>User</button>
);
}
export default withRouter(Navigation);wrap your component with withRouter:
import { useHistory } from 'react-router-dom';
function Navigation(props) {
const history = useHistory();
const abc = path => {
history.push(path);
};
return (
<button onClick={() => abc('/user')}>User</button>
);
}
export default Navigation; */Conclusion
To summarize, through this article “How to solve the error “TypeError: history.push is not a function“, we have given you a solution. Please check the program again and follow the steps. Hope you will get the error resolved soon.
If there are any difficulties in the process of coding, please contact us immediately for answers. Thank you for reading!
Leave a comment