Question

我非常了解我想对组件进行条件渲染的react-router-dom。如果未登录use，则将他重定向到某个第三方URL

例如，下面的代码看起来很整洁并且工作正常

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

在上面的示例中，如果我想重定向to https://www.google.com ，该怎么做？

如果我写

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

如何重定向到第三方网站？

Answer 1

您可以将标签用于外部网址

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

但是您也可以提供这样的组件：

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

Answer 2

您可以使用window.open()重定向到任何网站。

例如：

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

代码中的实现重定向：

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

您还可以指定目标属性或窗口名称，有关更多详细信息，请参见w3school tutorial about this function。

Answer 3

如果您使用的是 Typescript，您可能会在接受的答案中收到以下错误：

Type 'string' is not assignable to type 'Location'

要解决这个问题，您只需要使用 window.location.href

<Route path="/external" component={() => {window.location.href = config.UPGRADE_URL return null }} />

Answer 4

请记住，您无法使用<Link />或<NavLink />来执行此操作，因为它们主要用于在整个“单页应用程序”中进行路由。

您应该改用定位标记。例如：<a href="https://www.google.com">Google</a>。

Answer 5

只需执行以下操作即可轻松使用按钮：

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

使用react-router-dom重定向到第三方URL

5 个答案: