由于我在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 link通过提供一个对象的路径名键链接到外部站点:

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

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

过度使用window.location.replace(),就像其他好的答案建议的那样,尝试使用window.location.assign()。

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

window.location.assign()将转换到指定的URL,但将保存浏览器历史记录中的前一页,允许适当的后退按钮功能。

location.replace ()

location.assign ()

此外,如果您使用窗口。location = url方法,如在其他答案中提到的,我强烈建议切换到window.location.href = url。

关于它有一个很大的争论,许多用户似乎坚定地希望恢复较新的对象类型窗口。将其原始实现定位为字符串仅仅是因为它们可以(并且它们会攻击任何不这样说的人),但是理论上您可以中断访问该窗口的其他库功能。位置的对象。

看看这段对话。这是可怕的。 设置位置。Href与位置

其他回答

最简单的解决方案是使用渲染函数并更改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>

不需要使用React Router中的<Link />组件。

如果你想去外部链接使用锚标签。

<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</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等。

在React Router v6中,组件不可用。相反,现在它支持element。制作一个组件重定向到外部站点,并按所示添加它。

import * as React from 'react';
import { Routes, Route } from "react-router-dom";

function App() {
  return(
    <Routes>
      // Redirect
      <Route path="/external-link" element={<External />} />
    </Routes>
  );
}

function External() {
  window.location.href = 'https://google.com';
  return null;
}

export default App;

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

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

对于我的案例,我正在寻找一种方法,每当用户访问根URL http://myapp.com时,将他们重定向到应用程序http://myapp.com/newplace中的其他地方。因此,上述方法有所帮助。