How to redirect to external url using .push redux-router?

Question

I have Card which is redirecting on external URL on click. But instead of using location.href, I need to use redux-router's .push command. How can I do this?

Simple example of the code:

<Card 

return (
  title={props.title}
  onClick={() => {
    location.href='www.example.com'
  }}
)

If I use this props.navigate('www.example.com') it is returning the URL like a parameter on the localhost.

Ajeet Shah · Accepted Answer · 2021-04-05T16:39:28.697

You cannot use Link or history.push from react-router to redirect to an external site. You can use window.location.href or window.location.replace.

From history:

We don't support redirecting out of domain period. In general you should handle redirects to external URLs separately.

From Link:

<Link/> is a router-aware anchor, if you want to link to an external site, use an <a/>.

Edit:

Redux-Router uses history and react-router packages internally, so external redirects would not be possible with it as well.

score 0 · Answer 2 · answered Apr 05 '21 at 15:51

0

If you want to make whole card clickable you also try -

<a href="www.example.com" target="_blank"><Card /></a>

Since you are trying to move out of the current application, so it does not matter if you are using react router or not.

answered Apr 05 '21 at 15:51

Dilshad Ahmed

34
3

This is a simple example of the code, i am mapping data with multiple cards, and the url is changing depending of the card so i cant do this. – Kate Apr 05 '21 at 16:10
Can you create an example on http://codesandbox.io/? – Dilshad Ahmed Apr 05 '21 at 17:02

How to redirect to external url using .push redux-router?

2 Answers2

Edit: