React-Router外部链接

Question

由于我正在使用react-router来处理反应应用程序中的路由,所以我很好奇是否有办法重定向到外部资源.

说某人点击:

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

Answer 1

这是使用React Router重定向到外部链接的单线程:

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

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

适用于React Router 3和4.

Answer 2

使用 react-router 的 Link 组件，您可以做到这一点。在 " to " 道具中，您可以指定 3 种类型的数据：

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

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

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 等。

Answer 3

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

Answer 4

无需使用<Link />react-router中的组件.

如果要转到外部链接,请使用锚标记.

<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>

Answer 5

它不需要请求反应路由器。此操作可以本地完成，由浏览器提供。

只是使用 window.location

class RedirectPage extends React.Component {
  componentDidMount(){
    window.location.replace('http://www.google.com')
  }
}

Answer 6

我经历过同样的问题。我希望我的作品集重定向到社交媒体句柄。之前我使用的{Link} from "react-router-dom".是重定向到子目录，如下所示，

链接可用于在网站内路由网页。如果我们想重定向到外部链接，那么我们应该使用锚标记。像这样，

Answer 7

使用这里的一些信息，我想出了以下组件，您可以在路由声明中使用它。它与 React Router v4 兼容。

它使用打字稿，但转换为原生 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'}
/>

Answer 8

最简单的解决方案是使用渲染函数并更改window.location.

<Route path="/goToGoogle"
       render={() => window.location = "https://www.google.com"} />

如果你想要一个小的可重用组件，你可以像这样提取它：

const ExternalRedirect = ({ to, ...routeProps }) => {
   return <Route {...routeProps} render={() => window.location = to} />;
};

然后像这样使用它（例如在路由器交换机中）：

<Switch>
    ...
    <ExternalRedirect exact path="/goToGoogle" to="https://www.google.com" />
</Switch>

Answer 9

我很幸运：

<Route
    path="/example"
    component={() => {
        global.window && (global.window.location.href = 'https://example.com');
        return null;
    }}
/>

Answer 10

我自己（在我的网络应用程序中）通过添加一个锚标记而不使用 React Router 中的任何内容解决了这个问题，只是一个带有链接的普通锚标记，正如您在React 应用程序中使用锚标记的图片屏幕截图中看到的那样使用反应路由器

基本上，您不会将用户路由到应用程序内的另一个页面，因此您不得使用内部路由器，而应使用普通的锚点。

虽然这是针对非 React-Native 的解决方案，但你可以尝试一下。

Answer 11

在 React Route V6 中，渲染道具被删除。它应该是一个重定向组件。

重定向网址：

const RedirectUrl = ({ url }) => {
  useEffect(() => {
    window.location.href = url;
  }, [url]);

  return <h5>Redirecting...</h5>;
};

路线：

<Routes>
   <Route path="/redirect" element={<RedirectUrl url="https://google.com" />} />
</Routes>