由于我在React应用程序中使用React路由器来处理我的路由，我很好奇是否有一种方法可以重定向到外部资源。
比如有人打人:
example.com/privacy-policy
我希望它重定向到:
example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies
我发现在我的index.html加载中，避免用纯JavaScript编写它完全没有任何帮助:
if (window.location.path === "privacy-policy"){
window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}
当前回答
利用这里的一些信息，我提出了以下组件，您可以在路由声明中使用它。它与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'}
/>
其他回答
我遇到了同样的问题，并在React中使用http://或https://解决了它。
像: <a target="_blank" href="http://www.example.com/" title="example">见detail</a>
你可以使用你的动态URL:
<Link to={{pathname:`${link}`}}>View</Link>
下面是使用React Router重定向到外部链接的一行代码:
<Route path='/privacy-policy' component={() => {
window.location.href = 'https://example.com/1234';
return null;
}}/>
它使用React纯组件概念，将组件代码减少为一个函数，而不是渲染任何东西，将浏览器重定向到外部URL。
它在React Router 3和4上都可以工作。
我最终创建了自己的组件，<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中没有这么简单
利用这里的一些信息，我提出了以下组件，您可以在路由声明中使用它。它与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'}
/>
