I'm creating my newest component as a Hook component, where I imported 'useNavigate' since the regular way of pushing history etc won't work:
import { useNavigate } from 'react-router-dom';
This forced me to update react-dom
and react-router-dom
into the latest versions. Which in turn forced me to change Switch
to Routes
:
<Routes >
<Route exact path="/" element={<Home />} />
<Route exact path="/home" element={<Home />} />
<Route exact path="/login" element={<Login />} />
<Route exact path="/register" element={<Register/>} />
<Route exact path="/profile" element={<Profile />} />
<Route path="/schedule/" element={<BoardSchedule />} />
<Route path="/user" component={<BoardUser />} />
<Route path="/mod" element={<BoardModerator />} />
<Route path="/admin" element={<BoardAdmin />} />
</Routes>
Now when logging in, I'm getting this error:
login.component.js:60 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')
login.component still looks the same:
handleLogin(e) {
e.preventDefault();
this.setState({
message: "",
loading: true
});
this.form.validateAll();
if (this.checkBtn.context._errors.length === 0) {
AuthService.login(this.state.username, this.state.password).then(
() => {
this.props.history.push("/user");
window.location.reload();
},
error => {
const resMessage =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
this.setState({
loading: false,
message: resMessage
});
}
);
} else {
this.setState({
loading: false
});
}
}
It seems that this.props
is always undefined within login.component now, which I'm pretty sure wasn't the case when I was using Switch
instead of Routes
- because everything worked fine back then.
I've tried multiple suggestions on here and elsewhere for over an hour all in vain. What am I missing?