react-router重定向到其他域网址

Question

我正在使用react-router进行客户端路由。 我有一个按钮，当有人单击该按钮时，我想将用户重定向到另一个URL。 例如，我想将用户重定向到“ http://www.google.com ”。 我使用了导航混合，并使用了this.transitionTo（“ https://www.google.com ”）。 但是，当我这样做时，我会收到此错误永久违规：找不到名为“ https://www.google.com ”的路由。

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

Answer 1

您不需要外部链接的react-router ，可以使用常规链接元素（例如JSX <a href="..."/> ）就可以了。

仅当您具有内部导航（即从组件到组件）时，您才需要react-router ，为此，浏览器的URL栏应使其看起来像您的应用程序实际上正在切换“真实” URL。

Answer 2

正如在评论这个回答中指出，解决这个默认的方式是使用锚元素（ a带标记） href指向那个你想航线用户目标URL属性。 具有按钮外观但行为或锚点的按钮几乎是Web反模式。 在此答案中查看更多信息： https : //stackoverflow.com/a/1667512/1460905 。

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

在这种情况下，为什么不使用window对象的location属性？ 它甚至提供了一种很好的功能方法来转到外部位置。 参见参考 。

因此，如果您有组件，请说

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

然后添加handleClick ，使组件看起来像

class Button extends Component {
  handleClick() {
    // do something meaningful, Promises, if/else, whatever, and then
    window.location.assign('http://github.com');
  }

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

由于它是全局的，因此无需导入window 。 应该可以在任何现代浏览器中完美运行。

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

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>
  );
};

Answer 3

我找不到用React Router做到这一点的简单方法。 正如@Mike所写，将用户发送到外部站点时，应使用定位符（ <a>标记）。

我创建了一个自定义的<Link>组件，以动态决定是呈现React-Router <Link>还是常规的<a>标签。

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;

Answer 4

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

我通常用is-internal-link这样做

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

免责声明：我是此is-internal-link的作者

Answer 5

我遇到了同样的问题，并且对问题的研究发现，我可以简单地使用“ a href”标签。 如果使用target =“ _ blank”，则应在此处编写链接...

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