React-Router 外部链接

javascript redirect reactjs react-router react-router-redux

2022-08-30 00:45:32

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

假设有人命中：

example.com/privacy-policy

我希望它重定向到：

example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

我发现在避免在我的索引处用普通的JS编写它没有任何帮助.html加载如下内容：

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

答案 1

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

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

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

在 React Router 3 和 4 上都有效。

答案 2

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

字符串：链接位置的字符串表示形式，通过连接位置的路径名、搜索和哈希属性来创建。
对象：可以具有以下任何属性的对象：
- pathname：一个字符串，表示要链接到的路径。
- search：查询参数的字符串表示形式。
- hash：放入URL的哈希，例如#a哈希。
- 状态：要保存到该位置的状态。
a 函数：一个函数，其当前位置作为参数传递到该函数，并且应以字符串或对象的形式返回位置表示形式

对于您的示例（外部链接）：

您可以执行以下操作：

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

你还可以传递你想要的道具，比如标题、id、类名等。