在href中调用auth0登录

Question

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

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

我需要显示一个看起来像超链接文本的按钮，因为我无法在this.login中调用href函数。现在，“登录”和“这里”之间有很大的空间（由于按钮）。我还需要将“此处”标记为红色，以告知用户可点击。

我尝试过<div> Please login <a onClick={this.login}>here</a></div>，但它的“这里”看起来像是一个简单的文本。没有链接出现。只有按钮可以添加链接，我不知道原因。

{!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>

原因是：没有a属性的href标签没有被浏览器呈现为链接。为了减轻这种情况，我们为它添加了一些任意值。

在您的onClick处理程序上-针对您的情况，login-您需要确保避免发生默认操作-导航至相对URL #-

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