Problem in redirecting programmatically to a route in react router v6

Question

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 "/" which is the home page. At the moment I am facing this problem--> TypeError: Cannot read properties of undefined (reading 'push'). As a beginner, I would really appreciate experts' help.

AddContacts.js

import React, { Component } from "react";
import { Consumer } from "../../context";
import TextInputGroup from "../layout/TextInputGroup";
import { v4 as uuidv4 } from "uuid";
import { useNavigate } from "react-router-dom";

class AddContacts extends Component {
  state = {
    name: "",
    email: "",
    phone: "",
    errors: {},
  };
  onSubmit = (dispatch, e) => {
    e.preventDefault();

    const { name, email, phone } = this.state;

    //Check for errors

    if (name === "") {
      this.setState({ errors: { name: "Name is required" } });
      return;
    }
    if (email === "") {
      this.setState({ errors: { email: "Email is required" } });
      return;
    }
    if (phone === "") {
      this.setState({ errors: { phone: "Phone is required" } });
      return;
    }

    const newContact = {
      id: uuidv4(),
      name,
      email,
      phone,
    };
    dispatch({ type: "ADD_CONTACT", payload: newContact });

    this.setState({
      name: "",
      email: "",
      phone: "",
      errors: {},
    });
    this.props.navigate.push("/");
  };

  onChange = (e) => this.setState({ [e.target.name]: e.target.value });
  render() {
    const { name, email, phone, errors } = this.state;

    return (
      <Consumer>
        {(value) => {
          const { dispatch } = value;

          return (
            <div className="card mb-3">
              <div className="card-header">Add Contacts</div>
              <div className="card-body">
                <form onSubmit={this.onSubmit.bind(this, dispatch)}>
                  <TextInputGroup
                    label="Name"
                    name="name"
                    placeholder="Enter Name..."
                    value={name}
                    onChange={this.onChange}
                    error={errors.name}
                  />
                  <TextInputGroup
                    label="Email"
                    name="email"
                    type="email"
                    placeholder="Enter Email..."
                    value={email}
                    onChange={this.onChange}
                    error={errors.email}
                  />
                  <TextInputGroup
                    label="Phone"
                    name="phone"
                    placeholder="Enter Phone..."
                    value={phone}
                    onChange={this.onChange}
                    error={errors.phone}
                  />
                  <input
                    type="submit"
                    value="Add Contact"
                    className="btn btn-light btn-block mt-3"
                  />
                </form>
              </div>
            </div>
          );
        }}
      </Consumer>
    );
  }
}

export default AddContacts;

Here is the App.js file

import React, { Component } from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

import Contacts from "./components/contacts/Contacts";
import Header from "./components/layout/Header";
import AddContacts from "./components/contacts/AddContacts";
import About from "./components/pages/About";

import { Provider } from "./context";

import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

function App() {
  return (
    <Provider>
      <BrowserRouter>
        <div className="App">
          <Header branding="Contact manager" />
          <div className="container">
            <Routes>
              <Route path="/" element={<Contacts />} />{" "}
              <Route path="/contact/add/*" element={<AddContacts />} />{" "}
              <Route path="about/*" element={<About />} />{" "}
            </Routes>{" "}
          </div>{" "}
        </div>{" "}
      </BrowserRouter>{" "}
    </Provider>
  );
}

export default App;

Have you looked through this example in the docs? It covers this exact use-case via the useNavigation hook. reactrouter.com/docs/en/v6/examples/auth — Jake Worth
– Jake Worth, Commented Nov 9, 2021 at 15:01

Drew Reese · Accepted Answer · 2021-11-09 16:49:09Z

8

Issue

TypeError: Cannot read properties of undefined (reading 'push')

This is cause by you attempting to navigate from a navigate prop that doesn't exist, it's undefined.

this.props.navigate.push("/");

The useNavigate hook is only compatible with function components, so of you want/need to use navigate with a class component you must either convert AddContacts to a function component, or roll your own custom withRouter Higher Order Component to inject the "route props" like the withRouter HOC from react-router-dom v5.x did.

Solution

I won't cover converting a class component to function component. Here's an example custom withRouter HOC:

const withRouter = WrappedComponent => props => {
  const navigate = useNavigate();
  // etc... other react-router-dom v6 hooks

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

And decorate the AddContacts component with the new HOC.

export default withRouter(AddContacts);

This will now pass a navigate prop (and any others you set up) to the decorated components and this.navigate will now be defined.

Additionally, the navigation API changed from v5 to v6, it's no longer the direct history object being used. navigate is a function instead of an object. To use you invoke the function and pass 1 or 2 arguments, the first is the target path, the second is an optional "options" object with replace and/or state key/values.

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: State }
  ): void;
  (delta: number): void;
}

To navigate now as follows:

this.props.navigate("/");

answered Nov 9, 2021 at 16:49

Drew Reese

207k19 gold badges281 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

zaidfazil Over a year ago

Is there any other way to navigate programmatically other than converting to functional components, for class based components?

zaidfazil Over a year ago

There should be a way right? I mean, is there any chance of dropping support for class based components.

Drew Reese Over a year ago

@zaidfazil What other sort of way are you looking for? You could instead create a wrapper component that accesses the hooks and passes the props to a class component. What does your second comment/question about, "is there any chance of dropping support for class based components?" Do you have a specific issue that applying this solution to isn't working as expected?

Drew Reese Over a year ago

@zaidfazil Not really. The RRDv6 higher-level routers all maintain their own internal history object, and only expose imperative navigation via the navigate function returned from the useNavigate hook. Other than converting the class components to function components, the other alternative I know of is to create a custom router component so you can use a custom history object directly. This removes history as a passed prop and the need to use the wrapper or HOC.

zaidfazil Over a year ago

Thank you @Drew for your kind and very detailed explanation. I realize it now, the silliness of my question. It was a misunderstanding or TBH less understanding from my part. Thank you again for bearing with me. I get it now, how to work with functional components using v6 along with my code base.

|

Avnish Jayaswal · Accepted Answer · 2023-07-13 09:50:37Z

1

How to redirect in React Router v6

import {  useNavigate  } from "react-router-dom";

  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate("/dashboard");
  };

answered Jul 13, 2023 at 9:50

Avnish Jayaswal

4996 silver badges6 bronze badges

Collectives™ on Stack Overflow

Problem in redirecting programmatically to a route in react router v6

2 Answers 2

Issue

Solution

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Issue

Solution

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related