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?