在 href 中调用 auth0 登录

Question

我正在尝试在用户未登录时显示一条消息。请在此处登录（红色）以继续。

在 render 方法中，我需要检查并查看用户是否已经登录以不显示任何消息。我还有一个将用户定向到登录页面的登录方法。

我需要显示一个看起来像超级linked 文本的按钮，因为我无法在 href 中调用 this.login 函数。现在 "login" 和 "here" 之间有一个很大的 space（因为按钮）。我还需要将 "here" 设为红色以告知用户它是可点击的。

我试过 <div> Please login <a onClick={this.login}>here</a></div> 但它 "here" 看起来像一个简单的文本。没有 link 出现。只有按钮可以加一个link 不知道是什么原因

{!this.props.isAuthed && <div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>}

Answer 1

试试这个：

<div> Please login <a onClick={this.login} href="#">here</a></div>

原因是：没有 href 属性的 a 标记不会像 link 那样被浏览器呈现。为了缓解这种情况，我们添加了一些任意值。

在您的 onClick 处理程序上 - login 在您的情况下 - 您需要确保防止默认操作 - 导航到相对 url # - 来自发生：

login = e => {
    e.preventDefault();
    // your login logic
}

Calling auth0 login in href