Javascript 反应路由器外部链路

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

假设某人点击：

example.com/privacy policy

我希望它重定向到：

example.zendesk.com/hc/en us/articles/123456789隐私政策

在我的index.html加载中，我发现在避免用纯JS编写时没有任何帮助，比如：

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

---

我认为React路由器不提供这种支持。提及

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

---

您可以尝试改用类似的方法

如果您使用的是服务器端渲染，您可以使用

StaticRouter

。使用

上下文

作为

道具

，然后在应用程序中添加

组件。其思想是，每次react路由器匹配重定向组件时，它都会将一些内容添加到您传递到静态路由器的上下文中，让您知道您的路径匹配重定向组件。现在你知道你点击了一个重定向，你只需要检查一下这是否是你正在寻找的重定向。然后通过服务器重定向<代码>ctx.redirect（'https://example/com）

实际上，我最终构建了自己的组件<代码> 它从

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;

import React，{Component}来自“React”；
导出类重定向扩展组件{
建造师（道具）{
超级（）；
this.state={…props}；
}
组件willmount（）{
window.location=this.state.route.loc；
}
render（）{
返回（重定向…）；
}
}
导出默认重定向；

编辑--注意：

---

这是关于react router:3.0.5的，在4.x中不是那么简单，这里有一个使用react router重定向到外部链接的一行代码：

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

{
window.location.href=https://example.com/1234'; 
返回null；
}}/>

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

---

可在React路由器3和4上工作。

无需使用React路由器的

组件

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

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

---

适用于V3，尽管它可能适用于V4。根据Eric的回答，我需要做更多的工作，比如处理url上没有“http”的本地开发。我还将重定向到同一服务器上的另一个应用程序

添加到路由器文件：

import RedirectOnServer from './components/RedirectOnServer';

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

从“./components/RedirectOnServer”导入RedirectOnServer；

和组件：

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;

import React，{Component}来自“React”；
导出类重定向服务器扩展组件{
建造师（道具）{
超级（）；
//如果前缀是http或https，则不添加任何内容
let prefix=window.location.host.startsWith（“http”）？：“http://”；
//在这里使用主机，因为我正在重定向到同一主机上的另一个位置
this.target=prefix+window.location.host+props.route.target；
}
componentDidMount（）{
窗口。位置。替换（此。目标）；
}
render（）{
返回(


正在重定向到{this.target}
);
}
}
导出默认重定向服务器；

使用React with Typescript，您会收到一个错误，因为函数必须返回React元素，而不是

void

。因此，我使用Route render方法（并使用React router v4）这样做：

redirectToHomePage=（）：null=>{
window.location.reload（）；
返回null；
};    

---

您还可以使用

window.location.assign（）

，

window.location.replace（）

etc

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

只需使用

窗口。位置

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

此外，如果要在新选项卡中打开它：

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

---

我能够使用以下方法在react路由器dom中实现重定向

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

}/>

---

在我的例子中，我正在寻找一种方法，每当用户访问根URL

http://myapp.com

到应用程序中的其他位置

http://myapp.com/newplace

。因此，以上内容很有帮助。

利用这里的一些信息，我提出了以下组件，您可以在路由声明中使用这些组件。它与React路由器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;
      }}
    />
  );
};

界面道具{
精确？：布尔；
链接：字符串；
路径：字符串；
敏感？：布尔值；
严格？：布尔；
}
const ExternalRedirect:React.FC=（props:props）=>{
const{link，…routeProps}=props；
返回(
{
窗口。位置。替换（道具链接）；
返回null；
}}
/>
);
};

并用于：

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

---

要扩展Alan的答案，您可以创建一个

，将所有

具有“To”属性且包含“http:”或“https:”的内容重定向到正确的外部资源

下面是一个工作示例，可以直接放在您的

中

{
window.location.replace（props.location.pathname.substr（1））///substr（1）删除前面的“//”
返回空
}}/>

我很幸运：

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

{
global.window&（global.window.location.href=）https://example.com');
返回null；
}}
/>

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

• 字符串：链接位置的字符串表示形式，通过连接位置的路径名、搜索和哈希属性创建
• 一个对象：一个可以具有以下任意属性的对象：

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

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

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

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

  <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>