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

Question

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

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

Answer 1

正如对此答案的评论所指出的那样，解决此问题的默认方法是使用锚元素（a标签），其href属性指向您希望将用户路由到的目标 URL。具有按钮外观但行为或锚点的按钮几乎是一种网络反模式。在此答案中查看更多信息：https : //stackoverflow.com/a/1667512/1460905。

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

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

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

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 2

你不需要react-router外部链接,你可以使用常规链接元素(如JSX <a href="..."/>)就好了.

只有react-router当您具有内部导航(即从组件到组件)时,您才需要浏览器的URL栏应该使您的应用看起来像实际上正在切换"真实"URL.

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