Home > Web Front-end > JS Tutorial > body text

How to Programmatically Redirect in React Router v6 with Class Components?

Patricia Arquette
Release: 2024-11-01 06:55:30
Original
203 people have browsed it

How to Programmatically Redirect in React Router v6 with Class Components?

Problem in Redirecting Programmatically to a Route in React Router v6

Issue

Facing a TypeError: Cannot read properties of undefined (reading 'push') while attempting to navigate using the useNavigate hook in a class component.

Cause

In React Router v6, useNavigate is only compatible with function components. When trying to use it in a class component (AddContacts), it remains undefined, resulting in the error.

Solution

To resolve this issue, there are two options:

1. Convert AddContacts to a Function Component

Refactor the AddContacts class component to a function component. This will allow you to use the useNavigate hook directly within the function.

2. Use a Custom withRouter HOC (Higher Order Component)

Create a custom withRouter HOC to inject the route props, including useNavigate, into the AddContacts component.

Here's an example custom withRouter HOC:

const withRouter = (WrappedComponent) => (props) => {
  const navigate = useNavigate();

  return (
    <WrappedComponent
      {...props}
      navigate={navigate}
    />
  );
};
Copy after login

Then, decorate the AddContacts component with the HOC:

export default withRouter(AddContacts);
Copy after login

This will pass the navigate prop to the AddContacts component and allow you to use it as expected.

Note on Navigation API Change

In React Router v6, the navigation API has changed. The history object is no longer directly used. Instead, there's a navigate function that takes one or two arguments: a target path and an optional "options" object for replace or state.

To navigate programmatically, use the following syntax:

this.props.navigate('/');
Copy after login

The above is the detailed content of How to Programmatically Redirect in React Router v6 with Class Components?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template