由于我在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和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中的<Link />组件。
如果你想去外部链接使用锚标签。
<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>
使用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重定向到外部链接的一行代码:
<Route path='/privacy-policy' component={() => {
window.location.href = 'https://example.com/1234';
return null;
}}/>
它使用React纯组件概念，将组件代码减少为一个函数，而不是渲染任何东西，将浏览器重定向到外部URL。
它在React Router 3和4上都可以工作。
我认为最好的解决方案是使用普通的<a>标记。其他一切似乎都令人费解。React路由器是为单页应用程序中的导航而设计的，因此将它用于其他任何事情都没有多大意义。为已经内置在<a>标签中的东西制作整个组件似乎…傻吗?
用react-router的Link组件就可以做到。在“to”道具中，您可以指定3种类型的数据:
a string: A string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties. an object: An object that can have any of the following properties: pathname: A string representing the path to link to. search: A string representation of query parameters. hash: A hash to put in the URL, e.g. #a-hash. state: State to persist to the location. a function: A function to which current location is passed as an argument and which should return location representation as a string or as an object
对于你的例子(外部链接):
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等。
