您是否曾经在所构建的React应用程序中遇到过想要通过单击按钮而不是链接进行导航的情况？ 它发生了，并且当它发生时，有几种方法可以解决此问题。 让我们探索一些选项，并使用React-Router进行构建。
像按钮一样设置链接样式
一种选择是使用锚标记并设置其样式以使其看起来像其余按钮。 这当然是一种快速有效的选择，实际上，如果您使用的是Bootstrap，这将非常容易。 只需将btn类添加到锚标记就可以了！
但是，在决定使用此选项之前，我们应考虑以下事实： 链接的行为应类似于链接，而按钮的行为应类似于button 。 例如，当按钮具有焦点并且用户按下空格键时，该按钮将被按下。 但是，锚标记不会发生这种情况。 按下空格键不会告诉浏览器导航到链接的URL。 我们可以使用keydown处理程序来解决此问题，但这似乎需要大量工作来解决一个相对简单的UX问题。
如果您不使用Bootstrap，则要考虑的另一件事是样式。 您可能已经为按钮添加了样式。 设置链接看起来像按钮的样式通常意味着向CSS添加额外的代码。 如果处理不当，它甚至可能是重复的 CSS，从而为该按钮链接重新显示按钮的样式。 这是效率低下且不佳的做法。
设置链接看起来像按钮的样式当然是一个可行的选择，但是要权衡一些缺点。 还有其他选择吗？
嵌套链接和按钮？
一种诱人的替代解决方案是将链接嵌套在按钮内，或将按钮嵌套在链接内。 毕竟，如果用户单击它，则实际上他们将同时单击按钮和链接。 它看起来像一个按钮，但像一个链接一样导航，对吗？
但是， 这是无效的HTML 。 HTML规范指示和不得包含交互式内容。 某些浏览器可能会正确渲染元素，但不能保证它们始终会正确渲染，并且有可能在不同的浏览器中以不同的方式显示它们。
那么，如果这行不通，还有什么其他选择？
使用按钮
剩下的选项是只使用一个按钮。 这是有效的HTML，不需要额外的样式即可使其起作用，这意味着该元素实际上将按照预期的方式运行。 它将正确渲染，将正确处理用户体验，并且一切都会很好。 换句话说， 如果您希望它看起来也像按钮，只需使用按钮即可！
当然，下一个问题是如何？ 幸运的是，答案比看起来容易。 我们一起做吧。
首先，让我们使用React-Router构建index.js文件。
在许多React项目中，您可能有一个单独的Button.js组件来处理所有元素。 这个例子很简单，不一定需要，但为了完整性我还是会包括在内。 在这种情况下，我们的Button只是将点击处理程序从props传递到呈现的元素。
现在，让我们添加App.js组件以呈现页面。
我们现在有一个可以正常运行的应用程序。 除了显示页面标题和无用的按钮外，它什么也不会做，但是它可以工作！ 下一个问题是如何创建可以处理导航的按钮。
让我们创建一个ButtonLink.js组件，该组件将自身包装在常规Button组件周围，并通过路由扩展其功能。 然后，我们可以将此组件包装在React-Router的withRouter()以添加导航控件。 单击按钮后，我们会将新的URL推送到React-Router的历史记录并导航到新页面。
请注意， ButtonLink只是使用特定的单击处理程序呈现一个Button 。 由于已经设置了Button的样式，因此无需添加任何其他样式。 简单！
还要注意，我给ButtonLink了prop role='link' ButtonLink该ButtonLink被向下传递给我们的Button组件，然后传递给元素。 重要的是要考虑可访问性，而这经常被人们遗忘或遗忘。 通过为按钮提供链接角色，可以告诉屏幕阅读器，单击按钮将像链接一样导航至新的URL。
现在我们已经构建了ButtonLink ，我们需要将其添加到App.js文件中。 我们将使用ButtonLink的route prop指定要导航到的新URL。 为了看到效果，我们还告诉页面根据当前路由呈现不同的
标头。
而已！ 现在，我们有了一个功能齐全的应用程序，其中包括一个路由到新URL的按钮。 这是我们的最终代码：
