由于我在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路由器提供这种支持。文档中提到
重定向>设置重定向到应用程序中的另一个路由，以维护旧的url。
你可以尝试使用类似React-Redirect的东西。
其他回答
下面是使用React Router重定向到外部链接的一行代码:
<Route path='/privacy-policy' component={() => {
window.location.href = 'https://example.com/1234';
return null;
}}/>
它使用React纯组件概念，将组件代码减少为一个函数，而不是渲染任何东西，将浏览器重定向到外部URL。
它在React Router 3和4上都可以工作。
使用React和TypeScript，你会得到一个错误，因为函数必须返回一个React元素，而不是void。所以我这样做，使用Route渲染方法(并使用React路由器v4):
redirectToHomePage = (): null => {
window.location.reload();
return null;
};
<Route exact path={'/'} render={this.redirectToHomePage} />
你也可以使用window.location.assign()， window.location.replace()等。
利用这里的一些信息，我提出了以下组件，您可以在路由声明中使用它。它与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'}
/>
我自己解决了这个问题(在我的web应用程序中)，通过添加一个锚标记，而不是使用React路由器的任何东西，只是一个普通的锚标记和一个链接，正如你可以在图片截图中看到的，在一个React应用程序中使用锚标记而不使用React路由器
基本上，你不会将你的用户路由到你的应用程序中的另一个页面，所以你不能使用内部路由器，而是使用一个正常的锚。
虽然这是一个非反应本机解决方案，但您可以尝试。
我认为最好的解决方案是使用普通的<a>标记。其他一切似乎都令人费解。React路由器是为单页应用程序中的导航而设计的，因此将它用于其他任何事情都没有多大意义。为已经内置在<a>标签中的东西制作整个组件似乎…傻吗?
