按钮作为链接，路由表达语义 UI 反应答案

【问题标题】：Button as Link that routes to express semantic-ui react按钮作为链接，路由表达语义 UI 反应
【发布时间】：2020-08-31 11:33:14
【问题描述】：

我在使用语义 UI 反应的反应应用程序中有一个标题。我想将我的登录按钮路由到后端快速路由 (/auth/login)。我通过从 react-router-dom 传入 {Link} 尝试了组合方法，但这不是路由到快速路由，而是查看 React 路由.. 事后看来，这当然是它应该如何工作..

这给我留下了一个问题，我怎样才能为这个按钮组件传递一个到后端 api 的链接？如果我传入“a”和路径，则会呈现为超链接，但路径不会传入。

我需要传递什么道具才能完成这项工作，因为我在按钮上的语义 ui 文档中看不到有意义的道具。或者我这样做是完全错误的方式（以前发生过这种情况令人惊讶）？

我的登录组件在下面..

import React, {Component} from 'react';
import { Button, Icon } from 'semantic-ui-react';

export default class LoginButtonNav extends Component {
  render() {
    return (
      <Button primary animated="vertical" as='a' path='/auth/login'>
        <Button.Content visible>Login</Button.Content>
        <Button.Content hidden>
          <Icon name="cloud" />
        </Button.Content>
      </Button>
    );
  }
}

【问题讨论】：

标签： semantic-ui-react

【解决方案1】：

好的，橡胶自己躲过了这个，传入一个 href 的值解决了它！

正确的组件：

import React, {Component} from 'react';
import { Button, Icon } from 'semantic-ui-react';

export default class LoginButtonNav extends Component {
  render() {
    return (
      <Button primary animated="vertical" as='a' href='/auth/login'>
        <Button.Content visible>Login</Button.Content>
        <Button.Content hidden>
          <Icon name="cloud" />
        </Button.Content>
      </Button>
    );
  }
}

如果有更好的方法来做到这一点，仍然感兴趣..

【讨论】：