Reactjs 反应路由器重定向到不同的域url

我使用react路由器进行客户端路由。我有一个按钮，当有人单击该按钮时，我想将用户重定向到另一个url。 例如，我想将用户重定向到“”。我使用了导航mixin并使用了这个.transitiono（“”）。但是当我这样做的时候，我得到了这个错误 不变冲突：找不到名为“”的路由

---

我可以使用window.location，但这是正确的方法吗？

对于外部链接，您不需要

react router

，您可以使用常规链接元素（即

）就可以了

当你有内部导航（即从一个组件到另一个组件）时，你只需要

react router

，浏览器的URL栏应该让你的应用看起来像是在切换“真实”URL

编辑因为人们似乎认为你不能使用

}
异步休假（evt）{
如果（此.状态.已完成）返回；
evt.preventDefault（）；
//做任何你需要做的事，但要快，这意味着如果你需要做的话
//各种事情，并行进行，而不是逐个运行：
等待承诺([
utils.doAllTheMetrics（），
user.logOutUser（），
store.cleanUp（），
somelib.whatever（），
]);
//好了，我们走吧。
this.setState（{finalized:true}），（）=>evt.target.click（）；
}

就是这样：当你点击链接（你把它设计成一个按钮，因为这就是CSS的作用）时，反应检查它是否可以作为状态检查安全地导航

• 如果可以，就让它发生
• 如果不能：
• 它防止通过

  preventDefault（）

  进行导航
• 做任何需要做的工作，然后
• 将自身标记为“现在可以安全离开”，然后重新触发链接

---

正如对此答案的评论中所指出的，解决此问题的默认方法是使用锚元素（a标记）和

href

属性，该属性指向您希望将用户路由到的目标URL。具有按钮外观但行为或锚定的按钮实际上是一种web反模式。请参阅此答案中的更多信息：

也就是说，当web应用程序需要执行某些操作，然后才重定向用户时，肯定存在一种潜在的情况。在这种情况下，如果用户采取的主要操作是提交一些数据或真正执行一个操作，并且重定向更多的是一个副作用，那么原始问题是有效的

在这种情况下，为什么不使用

窗口

对象的

位置

属性？它甚至提供了一个很好的功能方法，可以转到外部位置。看

所以，如果你有一个组件，比如

class Button extends Component {
  render() {
    return (
      <button onClick={this.handleClick.bind(this)} />
    );
  }
}

无需导入

窗口

，因为它是全局的。在任何现代浏览器中都能完美工作

此外，如果您有一个声明为函数的组件，则可能会在状态更改时使用来更改位置，如

const Button = () => {
  const [clicked, setClicked] = useState(false);

  useEffect(() => {
    if (clicked) {
      // do something meaningful, Promises, if/else, whatever, and then
      window.location.assign('http://github.com');
    }
  });

  return (
    <button onClick={() => setClicked(true)}></button>
  );
};

const按钮=（）=>{
const[clicked，setClicked]=useState（false）；
useffect（（）=>{
如果（单击）{
//做一些有意义的事情，承诺，如果/否则，无论什么，然后
window.location.assign（'http://github.com');
}
});
返回(
setClicked（true）}>
);
};

我找不到一个简单的方法来使用React路由器。正如@Mike所写的，在将用户发送到外部站点时，您应该使用锚（

标记）

我创建了一个自定义的

组件来动态决定是呈现React路由器

还是常规

标记

import * as React from "react";
import {Link, LinkProps} from "react-router-dom";

const ReloadableLink = (props: LinkProps & { forceReload?: boolean }) => {
    const {forceReload, ...linkProps} = props;
    if (forceReload)
        return <a {...linkProps} href={String(props.to)}/>;
    else
        return <Link {...linkProps}>
            {props.children}
        </Link>
};

export default ReloadableLink;

import*as React from“React”；
从“react router dom”导入{Link，LinkProps}；
const ReloadableLink=（props:LinkProps&{forceReload？：boolean}）=>{
常量{forceReload，…linkProps}=props；
如果（强制重新加载）
返回；
其他的
返回
{props.children}
};
导出默认的可重新加载链接；

正如@Mike'Pomax'Kamermans所指出的，您可以使用导航到外部链接

我通常是这样做的

从“React”导入React
从“react router dom”导入{Link as ReactRouterLink}
从“是内部链接”导入{isInternalLink}
常量链接=（{children，to，activeClassName，…other}）=>{
如果（isInternalLink（to））{
返回(
{儿童}
)
}
返回(
)
}
导出默认链接

---

免责声明：我是这篇

的作者，我也有同样的问题，我对这个问题的研究发现，我可以简单地使用“a href”标签。如果使用target=“\u blank”，您应该在此处写入链接

<a href="https://yourLink.com" target="_blank" rel="noopener noreferrer">Your Link</a>

---

您可以尝试创建一个链接元素，然后从代码中单击它。这是我的工作

const navigateUrl = (url) => {

let element = document.createElement('a');

if(url.startsWith('http://') || url.startsWith('https://')){
  element.href =  url;
} else{
  element.href = 'http://' + url;
}

element.click();
}

---

这是一个怎样的答案？问题是“如何在点击按钮时将我的应用重定向到外部url？”。问题概括为“如何以编程方式重定向以响应事件？”您不能使用link元素…a

只是另一个内联HTML元素，如

span

或

img

或

a

，唯一使其成为按钮的是CSS。因此，你需要一个

a

，它被设计成链接出来，CSS样式使它看起来像你的按钮。因为这是在语义上设计你的页面/应用程序：你有一个链接，所以你把它变成一个链接，然后根据你的需要设计它的样式。与其倒着做，不如从一个按钮开始，然后强迫它成为一个链接。当然，所有这一切都是次要的，仍然坚定正确的建议，你不需要反应路由器为出站链接，作为错误信号。对不起，我仍然没有正确地沟通的挑战。这不是关于“使一个可点击的可见元素重定向出去”。它是关于在事件处理程序代码中处理事件后重定向出去。激活代码的可能是按钮onClick或其他事件。在代码中，您需要根据一些编程逻辑将用户重定向到外部url

import React from 'react'

import { Link as ReactRouterLink} from 'react-router-dom'
import { isInternalLink } from 'is-internal-link'

const Link = ({ children, to, activeClassName, ...other }) => {
  if (isInternalLink(to)) {
    return (
      <ReactRouterLink to={to} activeClassName={activeClassName} {...other}>
        {children}
      </ReactRouterLink>
    )
  }
  return (
    <a href={to} target="_blank" {...other}>
      {children}
    </a>
  )
}

export default Link

<a href="https://yourLink.com" target="_blank" rel="noopener noreferrer">Your Link</a>

const navigateUrl = (url) => {

let element = document.createElement('a');

if(url.startsWith('http://') || url.startsWith('https://')){
  element.href =  url;
} else{
  element.href = 'http://' + url;
}

element.click();
}