Redirect to third party url using react-router-dom

拟墨画扇 提交于 2019-12-30 13:38:05

问题


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 example, the below code looks neat and works fine

<Route exact path="/home" render={() => (
  isLoggedIn() ? (
    <Redirect to="/front"/>
  ) : (
   <Home />
  )
)}/>

Let's say in the above example if I want to redirect to https://www.google.com how can I do it?

if I write

 <Redirect to="https://www.google.com"> it gives me error. 

How can I redirect to a third party website?


回答1:


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;} }/>



回答2:


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.



来源:https://stackoverflow.com/questions/55103291/redirect-to-third-party-url-using-react-router-dom

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!