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

原文由 Eric Hodonsky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Eric Hodonsky 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是使用 React Router 重定向到外部链接的单行代码：

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

它使用 React 纯组件概念将组件代码缩减为单个函数，而不是渲染任何内容，而是将浏览器重定向到外部 URL。

它适用于 React Router 3 和 4。

原文由 Evgeny Lukianchikov 发布，翻译遵循 CC BY-SA 4.0 许可协议