在React中使用按钮进行路由

您是否曾经在所构建的React应用程序中遇到过想要通过单击按钮而不是链接进行导航的情况? 它发生了,并且当它发生时,有几种方法可以解决此问题。 让我们探索一些选项,并使用React-Router进行构建。

像按钮一样设置链接样式

一种选择是使用锚标记并设置其样式以使其看起来像其余按钮。 这当然是一种快速有效的选择,实际上,如果您使用的是Bootstrap,这将非常容易。 只需将btn类添加到锚标记就可以了!

但是,在决定使用此选项之前,我们应考虑以下事实: 链接的行为应类似于链接,而按钮的行为应类似于button 。 例如,当按钮具有焦点并且用户按下空格键时,该按钮将被按下。 但是,锚标记不会发生这种情况。 按下空格键不会告诉浏览器导航到链接的URL。 我们可以使用keydown处理程序解决此问题,但这似乎需要大量工作来解决一个相对简单的UX问题。

如果您不使用Bootstrap,则要考虑的另一件事是样式。 您可能已经为按钮添加了样式。 设置链接看起来像按钮的样式通常意味着向CSS添加额外的代码。 如果处理不当,它甚至可能是重复的 CSS,从而为该按钮链接重新显示按钮的样式。 这是效率低下且不佳的做法。

设置链接看起来像按钮的样式当然是一个可行的选择,但是要权衡一些缺点。 还有其他选择吗?

嵌套链接和按钮?

一种诱人的替代解决方案是将链接嵌套在按钮内,或将按钮嵌套在链接内。 毕竟,如果用户单击它,则实际上他们将同时单击按钮链接。 它看起来像一个按钮,但像一个链接一样导航,对吗?

   

但是, 这是无效的HTML 。 HTML规范指示