how to navigate from one page to other page using react-router-dom-v6 in class-based component?

Question

I am using React-router-dom-V6 for navigation with Class Based Component in my WebApp and I want to navigate from one page to another page, how can I achieve this ? in functional component there is Hook named useNavigate(), how to navigate in class component?

Answer 1

You can use Navigate component for navigation in class components.

import * as React from "react";
import { Navigate } from "react-router-dom";

class LoginForm extends React.Component {
  state = { user: null, error: null };

  async handleSubmit(event) {
    event.preventDefault();
    try {
      let user = await login(event.target);
      this.setState({ user });
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    let { user, error } = this.state;
    return (
      <div>
        {error && <p>{error.message}</p>}
        {user && (
          <Navigate to="/dashboard" replace={true} />
        )}
        <form onSubmit={event => this.handleSubmit(event)}>
          <input type="text" name="username" />
          <input type="password" name="password" />
        </form>
      </div>
    );
  }
}