Conditional Redirect Using React Router

Question

I have a favorites button, for which if a non-logged user clicks, they should be redirected to the login page.

This button looks like this:

                <Button
                  onClick={() => addFavorite(card, props.loggedUser)}
                  color={
                    favorites.includes(card.id) ? "google plus" : "twitter"
                  }
                  icon={
                    favorites.includes(card.id) ? "heart" : "heart outline"
                  }
                />

I've tried several ways to create a conditional to redirect the user, but I'm having some issues.

I first tried this:

onClick={() => typeof props.loggedUser.id === "undefined" ? <Redirect to="/login" /> : addFavorite(card, props.loggedUser)}

this is what my loggedUser state looks like:

{token: undefined, firstName: undefined, id: undefined, favorites: undefined, username: undefined}

i believe this is correctly catching the first condition, as the addFavorite function isn't running, but it is not redirecting to the login page.

I've also experimented with props.push history, but I'm using redux, and when i tried to wrap my main App with withRouter, it was causing issues. Not sure if I was doing it incorrectly, but I also was concerned about the other components having correct access to props. I'm probably wrong on this, but either way, if there is a best way to accomplish this, i'm all ears. Thanks.

Asaf Aviv · Accepted Answer · 2019-12-18 02:21:11Z

2

To manually redirect to a different route you need to use history.push(url) from the props that react-router-dom injects to the component.

If props.history is undefined you will need to wrap the component with withRouter HOC or use useHistory(hooks are available from V5.1) hook from react-router-dom

const addFavorite = (card) => {
 if(!props.loggedUser.id) {
   props.history.push('/login')
   return
 }

 // add to favorites
}

<Button onClick={() => addFavorite(card)} />

answered Dec 18, 2019 at 2:21

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Rogerson Over a year ago

thank you, and appreciate alerting me to useHistory hook--tried that and working great

Collectives™ on Stack Overflow

Conditional Redirect Using React Router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related