title: Problem in redirecting programmatically to a route in react router v6
body: <p>I want to perform navigation on certain user actions, say onSubmit of a button. suppose a user clicks on the Add contact button I want react-router to redirect in &quot;/&quot; which is the home page. At the moment I am facing this problem--&gt; TypeError: Cannot read properties of undefined (reading 'push'). As a beginner, I would really appreciate experts' help.</p>
  <p>AddContacts.js</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Consumer } from &quot;../../context&quot;;
  import TextInputGroup from &quot;../layout/TextInputGroup&quot;;
  import { v4 as uuidv4 } from &quot;uuid&quot;;
  import { useNavigate } from &quot;react-router-dom&quot;;
  
  class AddContacts extends Component {
    state = {
      name: &quot;&quot;,
      email: &quot;&quot;,
      phone: &quot;&quot;,
      errors: {},
    };
    onSubmit = (dispatch, e) =&gt; {
      e.preventDefault();
  
      const { name, email, phone } = this.state;
  
      //Check for errors
  
      if (name === &quot;&quot;) {
        this.setState({ errors: { name: &quot;Name is required&quot; } });
        return;
      }
      if (email === &quot;&quot;) {
        this.setState({ errors: { email: &quot;Email is required&quot; } });
        return;
      }
      if (phone === &quot;&quot;) {
        this.setState({ errors: { phone: &quot;Phone is required&quot; } });
        return;
      }
  
      const newContact = {
        id: uuidv4(),
        name,
        email,
        phone,
      };
      dispatch({ type: &quot;ADD_CONTACT&quot;, payload: newContact });
  
      this.setState({
        name: &quot;&quot;,
        email: &quot;&quot;,
        phone: &quot;&quot;,
        errors: {},
      });
      this.props.navigate.push(&quot;/&quot;);
    };
  
    onChange = (e) =&gt; this.setState({ [e.target.name]: e.target.value });
    render() {
      const { name, email, phone, errors } = this.state;
  
      return (
        &lt;Consumer&gt;
          {(value) =&gt; {
            const { dispatch } = value;
  
            return (
              &lt;div className=&quot;card mb-3&quot;&gt;
                &lt;div className=&quot;card-header&quot;&gt;Add Contacts&lt;/div&gt;
                &lt;div className=&quot;card-body&quot;&gt;
                  &lt;form onSubmit={this.onSubmit.bind(this, dispatch)}&gt;
                    &lt;TextInputGroup
                      label=&quot;Name&quot;
                      name=&quot;name&quot;
                      placeholder=&quot;Enter Name...&quot;
                      value={name}
                      onChange={this.onChange}
                      error={errors.name}
                    /&gt;
                    &lt;TextInputGroup
                      label=&quot;Email&quot;
                      name=&quot;email&quot;
                      type=&quot;email&quot;
                      placeholder=&quot;Enter Email...&quot;
                      value={email}
                      onChange={this.onChange}
                      error={errors.email}
                    /&gt;
                    &lt;TextInputGroup
                      label=&quot;Phone&quot;
                      name=&quot;phone&quot;
                      placeholder=&quot;Enter Phone...&quot;
                      value={phone}
                      onChange={this.onChange}
                      error={errors.phone}
                    /&gt;
                    &lt;input
                      type=&quot;submit&quot;
                      value=&quot;Add Contact&quot;
                      className=&quot;btn btn-light btn-block mt-3&quot;
                    /&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            );
          }}
        &lt;/Consumer&gt;
      );
    }
  }
  
  export default AddContacts;
  </code></pre>
  <p>Here is the App.js file</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { BrowserRouter, Routes, Route, Link } from &quot;react-router-dom&quot;;
  
  import Contacts from &quot;./components/contacts/Contacts&quot;;
  import Header from &quot;./components/layout/Header&quot;;
  import AddContacts from &quot;./components/contacts/AddContacts&quot;;
  import About from &quot;./components/pages/About&quot;;
  
  import { Provider } from &quot;./context&quot;;
  
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import &quot;./App.css&quot;;
  
  function App() {
    return (
      &lt;Provider&gt;
        &lt;BrowserRouter&gt;
          &lt;div className=&quot;App&quot;&gt;
            &lt;Header branding=&quot;Contact manager&quot; /&gt;
            &lt;div className=&quot;container&quot;&gt;
              &lt;Routes&gt;
                &lt;Route path=&quot;/&quot; element={&lt;Contacts /&gt;} /&gt;{&quot; &quot;}
                &lt;Route path=&quot;/contact/add/*&quot; element={&lt;AddContacts /&gt;} /&gt;{&quot; &quot;}
                &lt;Route path=&quot;about/*&quot; element={&lt;About /&gt;} /&gt;{&quot; &quot;}
              &lt;/Routes&gt;{&quot; &quot;}
            &lt;/div&gt;{&quot; &quot;}
          &lt;/div&gt;{&quot; &quot;}
        &lt;/BrowserRouter&gt;{&quot; &quot;}
      &lt;/Provider&gt;
    );
  }
  
  export default App;
  </code></pre>