React-Router 外部链接

Question

由于我在 react 应用程序中使用 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 种类型的数据：

• 字符串：链接位置的字符串表示形式，通过连接位置的路径名、搜索和哈希属性创建。
• 对象：可以具有以下任何属性的对象：
  • 路径名：表示要链接到的路径的字符串。
  • 搜索：查询参数的字符串表示形式。
  • hash：要放入 URL 的哈希，例如#a 哈希。
  • 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

不需要使用 react-router 中的<Link /> 组件。

如果您想转到外部链接，请使用锚标记。

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

Answer 4

它不需要请求反应路由器。这个动作可以原生完成，由浏览器提供。

只需使用window.location

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

另外，如果你想在新标签页中打开它：

window.open('https://www.google.com', '_blank');

Answer 5

实际上我最终构建了自己的组件。 <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 6

使用此处的一些信息，我想出了以下组件，您可以在路由声明中使用它。它与 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 7

我遇到了同样的问题。我希望我的投资组合重定向到社交媒体句柄。之前我用{Link} from "react-router-dom". 就是重定向到这里的子目录，

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

Answer 8

我很幸运：

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

Answer 9

最简单的解决方案是使用render function 并更改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 10

您可以使用您的动态网址

<Link to={{pathname:`${link}`}}>View</Link>

Answer 11

我自己解决了这个问题（在我的网络应用程序中），方法是添加一个锚标记，而不使用 React 路由器中的任何东西，只是一个带有链接的普通锚标记，如图 screenshot of using anchor tag in a react.js app without using react router

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

虽然这是针对非 react-native 解决方案，但您可以尝试。

Answer 12

我认为 React-Router 不提供这种支持。 documentation 提到

设置重定向到您的应用程序 中的另一个路由以维护旧 URL。

您可以尝试改用 React-Redirect 之类的东西

Answer 13

要扩展 Alan 的答案，您可以创建一个 <Route/>，将所有带有“to”属性的 <Link/> 重定向到正确的外部资源。

下面是一个工作示例，可以直接放入您的<Router>。

<Route path={['/http:', '/https:']} component={props => {
  window.location.replace(props.location.pathname.substr(1)) // substr(1) removes the preceding '/'
  return null
}}/>

Answer 14

我认为最好的解决方案是只使用一个普通的旧 <a> 标签。其他一切似乎都令人费解。 React 路由器是为单页应用程序中的导航而设计的，因此将它用于其他任何事情并没有多大意义。为已经内置在 <a> 标签中的东西制作一个完整的组件似乎......很傻？

Answer 15

适用于 V3，尽管它可能适用于 V4。离开埃里克的回答，我需要做更多的事情，比如处理 url 上不存在“http”的本地开发。我还重定向到同一服务器上的另一个应用程序。

添加到路由器文件：

import RedirectOnServer from './components/RedirectOnServer';

       <Route path="/somelocalpath"
          component={RedirectOnServer}
          target="/someexternaltargetstring like cnn.com"
        />

还有组件：

import React, { Component } from "react";

export class RedirectOnServer extends Component {

  constructor(props) {
    super();
    //if the prefix is http or https, we add nothing
    let prefix = window.location.host.startsWith("http") ? "" : "http://";
    //using host here, as I'm redirecting to another location on the same host
    this.target = prefix + window.location.host + props.route.target;
  }
  componentDidMount() {
    window.location.replace(this.target);
  }
  render(){
    return (
      <div>
        <br />
        <span>Redirecting to {this.target}</span>
      </div>
    );
  }
}

export default RedirectOnServer;

Answer 16

我面临同样的问题。在 react js 中使用 http:// 或 https:// 解决了它。

例如： <a target="_blank" href="http://www.example.com/" title="example">See detail</a>

Answer 17

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Route path="/" exact>
        {window.location.replace("http://agrosys.in")}
      </Route>
    </Router>
  );
}

export default App;

Answer 18

// Create a custom redirect component

function MyRedirect(props) {
    window.location.replace(props.url);
    return null
}

// Place the component inside the route with the destination url

return (
        <Router>
            <Routes>
                <Route path="/example" element={
                    <MyRedirect url="https://example.com/"/>
                } />
            </Routes>
        </Router>
    );

我正在使用react-router-dom v6。

代码创建了一个自定义重定向组件，当放置在您的渲染函数中时，它会重定向到指定的外部 url。

Answer 19

将 React 与 Typescript 一起使用会出现错误，因为该函数必须返回一个反应元素，而不是 void。所以我使用 Route 渲染方法（并使用 React 路由器 v4）这样做了：

redirectToHomePage = (): null => {
    window.location.reload();
    return null;
  };    
<Route exact path={'/'} render={this.redirectToHomePage} />

你也可以使用window.location.assign()、window.location.replace()等

Answer 20

如果您使用服务器端渲染，您可以使用StaticRouter。将您的context 设置为props，然后在您的应用中添加<Redirect path="/somewhere" /> 组件。这个想法是每次 react-router 匹配一个重定向组件时，它都会在你传递给静态路由器的上下文中添加一些东西，让你知道你的路径匹配一个重定向组件。既然您知道您点击了重定向，您只需要检查这是否是您正在寻找的重定向。然后只需通过服务器重定向。 ctx.redirect('https://example/com')。

Answer 21

我能够使用以下方法在 react-router-dom 中实现重定向

<Route exact path="/" component={() => <Redirect to={{ pathname: '/YourRoute' }} />} />

就我而言，我一直在寻找一种方法，可以在用户访问根 URL http://myapp.com 时将其重定向到应用程序 http://myapp.com/newplace 中的其他位置。所以上面有帮助。

Answer 22

您现在可以通过使用 pathname 键向 to 提供对象来使用 React Link 链接到外部站点：

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

如果在回调中发现需要使用JS生成链接，可以使用window.location.replace()或window.location.assign()。

过度使用window.location.replace()，正如其他好的答案所建议的那样，尝试使用window.location.assign()。

window.location.replace() 将替换位置历史记录而不保留当前页面。

window.location.assign() 将转换到指定的 url，但会将上一页保存在浏览器历史记录中，从而允许正确的后退按钮功能。

https://developer.mozilla.org/en-US/docs/Web/API/Location/replace https://developer.mozilla.org/en-US/docs/Web/API/Location/assign

另外，如果您使用其他答案中提到的window.location = url 方法，我强烈建议您切换到window.location.href = url。 对此有一个激烈的争论，许多用户似乎坚决希望将较新的object 类型window.location 恢复为string 的原始实现，仅仅是因为他们可以（并且他们过分攻击任何说其他话的人），但是理论上，您可以中断访问 window.location 对象的其他库功能。

看看这个 convo。它是可怕的。 Javascript: Setting location.href versus location