1

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?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
djokerndthief
  • 455
  • 2
  • 4
  • 16
  • That's right, there are no longer any route props. It should be fairly obvious with `element={}` where the `Login` component is not passed any props at all. RRDv6 uses React hooks now. Either convert the components to React Function components and use the React hooks or create a custom `withRouter` HOC to do this for you and inject props into the decorated Class components. – Drew Reese Nov 09 '22 at 21:45
  • Thank you for your answer. My question was now linked to another post that does seem to be of much help (your answer, again). I'll take a look and see if I just convert everything to functional components or use the HOC solution. At first glance it seems to me the best solution would be to convert everything? But that goes against what I was suggested when reading the official 'Introducing Hooks' documentation - that you shouldn't start by converting everything at once. – djokerndthief Nov 09 '22 at 22:00
  • Yeah, that is still React's official stance... but they've also made it abundantly clear that Function components and hooks are the future of React. With RRDv6 going all-in on using React hooks and removing the route props (*and the `withRouter` HOC from v5*) they are sort of forcing the conversion in part. Creating a RRDv6 `withRouter` HOC is the middle ground to help from needing to completely rewrite components. – Drew Reese Nov 09 '22 at 22:16
  • I see. Well I think your answer here settles it. I'll just convert. It' just under 10 components anyway. Thanks again for your help! – djokerndthief Nov 09 '22 at 22:20

0 Answers0