Trying to redirect in react using react router

Question

so I have a bug that I can't seem to solve. Currently I am using react with react router, however I cannot seem to get react to redirect to a page. Here is a expert from my code (keep in mind this is a functional component)

<Route path="/login">
  <Login
    onSubmit={(user) => {
      login(user, (status) => {
        if (status == 200) {
          history.push('/home');
        } else {
          history.push('/login');
        }
      });
    }}
  />
</Route>

(For reference, I have a login component which takes in a onSubmit callback and in which I call a predefined login method in check the status of the response from my backend and redirect accordingly)

When I run this code and redirect, I get a error that says

Unhandled Rejection (TypeError): Cannot read property 'push' of undefined

And just to be clear, I have defined history in the first few lines of my component

let history = useHistory();

Any help will be greatly appreciated!

Yes, this is just a small snippet of my code (the actual code is largely irrelevant to my problem and I did not want to post that much) — Akshat Adsule, Oct 20 '20 at 05:16

score 1 · Answer 1 · answered Oct 20 '20 at 04:29

1

You can use Redirect from react-router-dom

import {  Redirect } from "react-router-dom";

...

<Route path="/login">
  <Login
    onSubmit={(user) => {
      login(user, (status) => {
        if (status == 200) {
           return <Redirect to="/home" />
        } else {
          return <Redirect to="/login" />
        }
      });
    }}
  />
</Route>

answered Oct 20 '20 at 04:29

Ferin Patel

3,424
2
17
49

Yeah I had tried that, but it did not work and Eslint threw errors... I am starting to wonder if I am using the router correctly as all the research I could find tell me to use history.push or the Redirect component. Thanks for responding! – Akshat Adsule Oct 20 '20 at 04:32
1

@AkshatAdsule have you tried passing `Login` Component in `````` – Ferin Patel Oct 20 '20 at 04:36
Would I just pass in component={}? – Akshat Adsule Oct 20 '20 at 04:43
No That would not work you need to pass your Component in that or you can use `render` option of `route` – Ferin Patel Oct 20 '20 at 04:45

score 1 · Accepted Answer · answered Oct 20 '20 at 04:49

1

history is resolving to undefined so you are trying to invoke undefined.push('path'), hence the error. You need to make history accessible within the scope of the component like this:

import {useHistory} from 'react-router-dom'

const App = () => (
const history = useHistory()
return <Login onSubmit={() => history.push('/path')} />
)

answered Oct 20 '20 at 04:49

Alex Mckay

3,463
16
27

This worked for me! I created a useHistory instance in my login component, and passed that to my callback. Thanks so much for your answer! – Akshat Adsule Oct 20 '20 at 05:14

Trying to redirect in react using react router

2 Answers2