React-Router外部链接

由于我正在使用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"
}

这是使用React Router重定向到外部链接的一种方法：

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

它使用React纯组件概念将组件代码简化为一个函数，该函数无需呈现任何内容，而是将浏览器重定向到外部URL。

在React Router 3和4。

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

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

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

我实际上最终构建了自己的组件。<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中不是那么简单

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

只是使用 window.location

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

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

• 一个字符串：链接位置的字符串表示形式，通过串联该位置的路径名，搜索和哈希属性创建。
• 一个对象：可以具有以下任何属性的对象：
  • pathname：一个字符串，代表要链接的路径。
  • search：查询参数的字符串表示形式。
  • hash：要放入URL中的哈希，例如＃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等。

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

它使用的是Typescript，但转换为原生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'}
/>

我很幸运：

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

我认为React-Router不提供这种支持。该文档提到

<重定向>设置到应用程序中另一个路由的重定向，以维护旧的URL。

你可以尝试使用类似阵营重定向代替

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

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

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

对于V3，尽管可能适用于V4。不符合Eric的答案，我需要做更多的事情，例如处理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;

使用带有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()等等

如果您正在使用服务器端借书，则可以使用StaticRouter。使用contextas props，然后<Redirect path="/somewhere" />在应用程序中添加组件。这个想法是，每当react-router匹配重定向组件时，它都会在传递给静态路由器的上下文中添加一些内容，以使您知道路径匹配重定向组件。现在，您知道自己命中了重定向，您只需检查是否这就是您要查找的重定向。然后只需通过服务器重定向即可。ctx.redirect('https://example/com')。

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

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

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