Question

我正在使用react-router进行客户端路由。我有一个按钮，当有人点击按钮时，我想将用户重定向到另一个网址。例如，我想将用户重定向到“http://www.google.com”。我使用了navigation mixin并使用了this.transitionTo（“https://www.google.com”）。但是当我这样做时，我得到了这个错误不变违规：找不到名为“https://www.google.com”的路线。

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

Answer 1

您不需要View来获取外部链接，您可以使用常规链接元素（例如JSX react-router）。

当您拥有内部导航（即从组件到组件）时，您只需<a href="..."/>，浏览器的网址栏应使其看起来像您的应用实际上正在切换＆＃34;实＆＃34;网址。

Answer 2

为什么不使用location对象的window属性？它甚至提供了一个很好的功能方法去外部位置。请参阅ref。

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

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，因为它是全局的。应该可以在任何现代浏览器中完美运行。

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

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

您可以尝试创建一个链接元素并从代码中单击它。这对我有用

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

Answer 4

我无法通过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 5

正如@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 6

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

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

react-router重定向到不同的域url

6 个答案: