Redirect to third party url using react-router-dom

Question

I\'m very much aware of the react-router-dom I want to do a conditional rendering of the component. If use is not logged in redirect him to some third party URL

for

Answer 1

Can easily use a button just do this:

<button onClick={(e) => (window.location = 'https://www.google.com')}>Click me</button>

Answer 2

Have on mind that you cannot perform that with <Link /> or <NavLink /> since they're mainly for routing throughout Single Page Application.

You should use anchor tag instead. Example: <a href="https://www.google.com">Google</a>.

Answer 3

You can use window.open() to redirect to any website.

For example:

window.open('https://www.google.com');

implement redirection in your code:

render () {
  if(this.isLogin) {
    return(/* your components*/);
  } else {
    window.open('https://www.google.com');
    return (<div></div>); //render function should return something
  }
}

You can also specifies the target attribute or the name of the window, for more details, see w3school tutorial about this function.

Answer 4

You can use a tag for external urls,

<a href='https://domain.extension/external-without-params'>external</a>

but also you can provide component like this:

<Route path='/external' component={() => { window.location = 'https://domain.extension/external-without-params'; return null;} }/>