React-Router外部链接

Question

由于我使用react-router在react应用程序中处理我的路由，所以我很好奇是否有办法重定向到外部资源。

说某人点击：

example.com/privacy-policy

我希望它重定向到：

example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

我发现在我的index.html加载中避免在普通JS中编写它时完全没有任何帮助：

if ( window.location.path === "privacy-policy" ){
  window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}

Answer 1

Here's a one-liner for using React Router to redirect to an external link:

<Route path='/privacy-policy' component={() => { 
     window.location.href = 'https://example.com/1234'; 
     return null;
}}/>

It uses React pure component concept to reduce the component's code to a single function that, instead of rendering anything, redirects browser to an external URL.

Works both on React Router 3 and 4.

Answer 2

使用react-router的Link组件可以做到这一点。在“ 要”道具中，您可以指定3种数据类型：

• 字符串：链接位置的字符串表示形式，通过串联位置的路径名，搜索和哈希属性来创建。
• 对象：可以具有以下任意属性的对象：
  • 路径名：代表链接路径的字符串。
  • 搜索：查询参数的字符串表示形式。
  • 哈希：网址中的哈希，例如＃a-hash。
  • 状态：坚持到该位置的状态。
• 函数：将当前位置作为参数传递给该函数的函数，该函数应以字符串或对象的形式返回位置表示形式

例如（外部链接）：

https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

您可以执行以下操作：

<Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" />

您还可以传递想要使用的道具，例如标题，id，className等。

Answer 3

我实际上最终构建了自己的Component。 <Redirect> 它从react-router元素获取信息，因此我可以将其保存在我的路线中。如：

<Route
  path="/privacy-policy"
  component={ Redirect }
  loc="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies"
  />

这是我的组件 - 任何人都很好奇：

import React, { Component } from "react";

export class Redirect extends Component {
  constructor( props ){
    super();
    this.state = { ...props };
  }
  componentWillMount(){
    window.location = this.state.route.loc;
  }
  render(){
    return (<section>Redirecting...</section>);
  }
}

export default Redirect;

编辑 - 注意： 这是react-router: 3.0.5，在4.x

中并不那么简单

Answer 4

无需使用react-router中的<Link />组件。

如果您想转到外部链接，请使用锚标记。

<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>

Answer 5

它不需要请求反应路由器。此操作可以本地完成，由浏览器提供。

只需使用window.location

class RedirectPage extends React.Component {
  componentDidMount(){
    window.location.replace('http://www.google.com')
  }
}

Answer 6

我很幸运：

  <Route
    path="/example"
    component={() => {
    global.window && (global.window.location.href = 'https://example.com');
    return null;
    }}
/>

Answer 7

在这里使用一些信息，我提出了以下组件，您可以在路由声明中使用该组件。它与React Router v4兼容。

它使用的是打字稿，但转换为原生javascript应该相当简单：

interface Props {
  exact?: boolean;
  link: string;
  path: string;
  sensitive?: boolean;
  strict?: boolean;
}

const ExternalRedirect: React.FC<Props> = (props: Props) => {
  const { link, ...routeProps } = props;

  return (
    <Route
      {...routeProps}
      render={() => {
        window.location.replace(props.link);
        return null;
      }}
    />
  );
};

并用于：

<ExternalRedirect
  exact={true}
  path={'/privacy-policy'}
  link={'https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'}
/>

Answer 8

我自己（在我的网络应用程序中）解决了这个问题，方法是添加一个锚标签，没有使用 React 路由器中的任何东西，只是一个带有链接的普通锚标签，如图screenshot of using anchor tag in a react.js app without using react router

基本上，您不会将用户路由到应用内的另一个页面，因此您不得使用内部路由器，而应使用普通锚点。

虽然这是一个非 react-native 的解决方案，但你可以试试。

Answer 9

最简单的解决方案是使用 render function 并更改 window.location。

<Route path="/goToGoogle"
       render={() => window.location = "https://www.google.com"} />

如果你想要一个小的可重用组件，你可以像这样提取它：

const ExternalRedirect = ({ to, ...routeProps }) => {
   return <Route {...routeProps} render={() => window.location = to} />;
};

然后像这样使用它（例如在您的路由器交换机中）：

<Switch>
    ...
    <ExternalRedirect exact path="/goToGoogle" to="https://www.google.com" />
</Switch>

Answer 10

我遇到了同样的问题。我希望我的投资组合重定向到社交媒体句柄。之前我使用了 {Link} from "react-router-dom". 重定向到子目录，如这里，

链接可用于在网站内路由网页。如果我们想重定向到外部链接，那么我们应该使用锚标记。像这样，

Answer 11

要扩展Alan的答案，您可以创建一个<Route/>，将所有带有{to“属性（包含“ http：”或“ https：”）的<Link/>重定向到正确的外部资源。 / p>

下面是一个可行的示例，可以直接将其放置在<Router>中。

<Route path={['/http:', '/https:']} component={props => {
  window.location.replace(props.location.pathname.substr(1)) // substr(1) removes the preceding '/'
  return null
}}/>

Answer 12

我不认为React-Router提供这种支持。 documentation提及

  

A＆lt;重定向＆gt;设置重定向到您的应用程序中的另一条路线，以维护旧网址。

您可以尝试使用类似React-Redirect的内容

Answer 13

适用于V3，尽管可能适用于V4。离开Relic的答案，我需要做更多的事情，例如处理URL上不存在“ http”的本地开发。我还将重定向到同一服务器上的另一个应用程序。

已添加到路由器文件中：

import RedirectOnServer from './components/RedirectOnServer';

       <Route path="/somelocalpath"
          component={RedirectOnServer}
          target="/someexternaltargetstring like cnn.com"
        />

和组件：

import React, { Component } from "react";

export class RedirectOnServer extends Component {

  constructor(props) {
    super();
    //if the prefix is http or https, we add nothing
    let prefix = window.location.host.startsWith("http") ? "" : "http://";
    //using host here, as I'm redirecting to another location on the same host
    this.target = prefix + window.location.host + props.route.target;
  }
  componentDidMount() {
    window.location.replace(this.target);
  }
  render(){
    return (
      <div>
        <br />
        <span>Redirecting to {this.target}</span>
      </div>
    );
  }
}

export default RedirectOnServer;

Answer 14

我面临同样的问题。在 react js 中使用 http:// 或 https:// 解决。

喜欢： <a target="_blank" href="http://www.example.com/" title="example">See detail</a>

Answer 15

使用带有Typescript的React会出错，因为该函数必须返回一个react元素，而不是void。因此，我使用了Route渲染方法（以及使用React Router v4）来做到这一点：

redirectToHomePage = (): null => {
    window.location.reload();
    return null;
  };    
<Route exact path={'/'} render={this.redirectToHomePage} />

您还可以在其他地方使用window.location.assign()，window.location.replace()等

Answer 16

如果您使用服务器端rending，则可以使用StaticRouter。将context作为props，然后在您的应用中添加<Redirect path="/somewhere" />组件。这个想法是每次react-router匹配一个重定向组件，它会在你传递给静态路由器的上下文中添加一些东西，让你知道你的路径与重定向组件匹配。既然你知道你点击了一个重定向，你只需要检查你是否正在寻找重定向。然后只需重定向通过服务器。 ctx.redirect('https://example/com')。

Answer 17

我可以使用以下方法在react-router-dom中实现重定向

<Route exact path="/" component={() => <Redirect to={{ pathname: '/YourRoute' }} />} />

就我而言，我一直在寻找一种方法，当用户访问根URL http://myapp.com时将其重定向到应用程序http://myapp.com/newplace中的其他位置。所以上面的帮助。

Answer 18

您现在可以使用React Link通过使用to键向pathname提供对象来链接到外部站点：

<Link to={ { pathname: '//example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies' } } >

如果发现需要使用JS在回调中生成链接，则可以使用window.location.replace()或window.location.assign()。

如其他好答案所示，过度使用window.location.replace()，请尝试使用window.location.assign()。

window.location.replace()将替换位置记录，而不会保留当前页面。

window.location.assign()将转换为指定的url，但会将前一页保存在浏览器历史记录中，从而允许适当的后退按钮功能。

https://developer.mozilla.org/en-US/docs/Web/API/Location/replace https://developer.mozilla.org/en-US/docs/Web/API/Location/assign

此外，如果您使用的是其他答案中提到的window.location = url方法，我强烈建议切换到window.location.href = url。 对此有一个激烈的争论，许多用户似乎坚定地希望将较新的object类型window.location还原为string的原始实现，只是因为他们可以（并且他们攻击任何人（否则），但是从理论上讲，您可以中断访问window.location对象的其他库功能。

查看此convo。它是可怕的。 Javascript: Setting location.href versus location

Answer 19

你可以在 React 中使用这种方式移动到另一个网站

var link="www.facebook.com"
<a href={"https://"+link} target="/blank">target Button</a>