How to Fix \"TypeError: Cannot read properties of undefined (reading \'push\')\" Error in React Router v6?

Navigating Programmatically in React Router v6

Programmatic navigation in React Router v6 can present the "TypeError: Cannot read properties of undefined (reading 'push')" error. This occurs when attempting to navigate from a non-existent navigate prop, which is undefined.

Cause:

The useNavigate hook is designed for function components. Class components require a custom Higher Order Component (HOC) or conversion to functional components.

Solution 1: Convert to Functional Component

Convert AddContacts to a function component and use useNavigate:

<code class="javascript">import { useNavigate } from "react-router-dom";

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

  const onSubmit = (e) => {
    // ... submit logic ...
    navigate("/");
  };

  return (
    // ... form elements ...
  );
};</code>

Solution 2: Custom withRouter HOC

Create a custom withRouter HOC:

<code class="javascript">const withRouter = (WrappedComponent) => (props) => {
  const navigate = useNavigate();

  return (
    <WrappedComponent {...props} navigate={navigate} />
  );
};</code>

And wrap AddContacts with the HOC:

<code class="javascript">export default withRouter(AddContacts);</code>

Updated Navigation Syntax

In React Router v6, the navigate function has a changed syntax:

<code class="javascript">navigate(to, options?);
// where to is the target path and options is an optional object with replace and/or state</code>

Thus, the navigation statement becomes:

<code class="javascript">this.props.navigate("/");</code>

By using these solutions, you can effectively navigate programmatically in React Router v6 and avoid the undefined navigate error.

The above is the detailed content of How to Fix \"TypeError: Cannot read properties of undefined (reading \'push\')\" Error in React Router v6?. For more information, please follow other related articles on the PHP Chinese website!