0

I'm trying to get my router code to appear after my submit button is clicked on, if I type in the path, my "welcome msg" page does appears, however my goal is to have it appear with a button click.

These are my imports

import React, { Component } from "react";
import { Routes, Route } from "react-router-dom";
import Login from "./components/Login";
import WelcomeMsg from "./components/WelcomeMsg";

I tried to add this after super(props): this.handleSubmit = this.handleSubmit.bind(this); didn't work.

I believe this this.props.history.push("/welcomemsg"); would work with older versions of react router and with functional based components.

error message I receive is: × TypeError: Cannot read properties of undefined (reading 'push')

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: "",
    };
  }
  handleInputChange = (e) => {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    console.log(`${this.state.email} ${this.state.password}`);

    this.props.history.push("/welcomemsg");
  };

  render() {
    return (
      <div className="App">
        <Routes>
          <Route
            exact
            path="/"
            element={
              <React.Fragment>
                <Login
                  state={this.state}
                  handleInputChange={this.handleInputChange}
                  handleSubmit={this.handleSubmit}
                />
              </React.Fragment>
            }
          ></Route>
          <Route
            path="/welcomemsg"
            element={
              <React.Fragment>
                <WelcomeMsg state={this.state} />
              </React.Fragment>
            }
          ></Route>
        </Routes>
      </div>
    );
  }
}

any idea how to navigate this? or do I just have to use an older version of react-router?

0 Answers0