React 中使用 Button 的导航类型的差异

Question

要通过单击按钮导航到页面，我曾经使用过history.push('/roles/add')，但使用按钮作为我从未想过的链接，我很好奇知道其中的区别

要通过单击按钮导航到页面，

1. 我以前用过

   <Button onClick={() => {this.props.history.push('/roles/add')}}>Add</Button>

   或

2. 我会直接在按钮的

   onClick

   事件中调用组件

   <Button onClick={AddRole}>Add</Button>

   但我偶然发现了另一种方法，比如

   <Button as={Link} to={'/roles/add'}> Add </Button>

我想知道在性能或最佳实践方面会有什么差异，或者它们在功能级别上有任何其他差异。
这将是点击按钮导航到链接的推荐最佳实践。预先感谢。

Answer 1

假设您正在使用

react-router

，

Link

组件将呈现为锚元素 (

<a />

)，但当用户单击它时，它会调用

preventDefault()

以防止硬导航并在内部调用

useNavigate().navigate()

（或一些类似的 History API 抽象）。

实际上

<Link to="/path" />

是

<a onClick={() => navigate("/path")} />

的抽象。

如果不使用锚链接 (

<a />

)，用户将无法在其他选项卡中打开该链接。此外，由于不支持辅助技术，您还会损害可访问性。因此，您应该尽可能使用正确的标签（而不是

<button onClick={navigate} />

）。

不使用 JavaScript 进行导航的另一个原因是 Google bot 等爬虫无法发现您的页面。

两种方法的性能没有显着差异。