使用 <button> 反应路由器链接答案

【问题标题】：React Router Linking using <button>使用 <button> 反应路由器链接
【发布时间】：2021-06-06 17:37:22
【问题描述】：

我正在使用 React 路由器。我希望当用户单击按钮时，它将他们定向到具有 UserForm 组件的页面（端点）/form。

这是我包装按钮的代码：

          <Router>
          <Link to="/form" className="updateLink">
              <button className="updateBtn" onClick={() => {
                  this.update(id);
                  console.log(`Item Number: ${id} Was Updated Successfully`);
                        window.alert(`Item Number: ${id} Was Updated Successfully`);
                    }}>U</button>
          </Link>
          <Switch>
             <Router exact path="/form" component={UserForm} />
          </Switch>
          </Router>

【问题讨论】：

按钮不应用于导航。如果您愿意，可以将锚设置为按钮，但这是对元素的滥用和可访问性问题。
@isherwood 我很好奇，虽然我同意你的观点，但如果你必须同时采取行动和导航，你会如何处理它？如果没有按钮或类似的东西，我不知道如何处理这种情况
用户期望发生什么？很明显，导航到表单页面是元素的主要功能。

标签： javascript reactjs react-router jsx

【解决方案1】：

所以不起作用的原因是 Button 有自己的单击处理程序，与链接处理程序分开。您有两种选择：

设置 Link 标记的样式，使其看起来像一个按钮，但实际上并不像一个按钮（如果您需要在路由之外执行其他逻辑，这将不起作用）
实际上使用了一个按钮。然后使用'useHistory' React Hook React Router provides 获取您正在寻找的功能。

组件看起来像这样：

const history = useHistory()
return (
     <Button onClick={() => history.push("/abc")}/>

)

我个人建议您以您需要的方式简单地设置链接标签的样式。因为这对用户来说更容易理解和理解。但这只是一个好主意，如果您只关心路由。

【讨论】：

【解决方案2】：

上面的代码和你的代码一样准确吗？

Router 语句设置如下，一般在 App.js 中

    <Router>
        <Switch>
        <Route path = './form' component = {form}
        </Switch>
    </Router>

然后您创建表单组件并链接到它，然后将链接组件导入您希望使用它的组件中。

然后如下使用

    <Link to = './form'> Some Text </Link>

关于您遇到的按钮问题

它会呈现，但你不应该在 HTML 中嵌套 <a> 或 <button> 标记，因为它对于屏幕阅读器来说不是语义的、不可访问的，也不是有效的 HTML。

React 中的 Link 元素创建并呈现一个不应嵌套在按钮中的 <a> 标签。

你可以在你的案例中使用 useHistory 来达到同样的效果

    import React from 'react'
    import { useHistory } from 'react-router-dom'
    
    const component = () => {
      const { push } = useHistory()
      
    ...
    
    
      <button
        type="button"
        onClick={() => push('/form')}>
        Click me to go to a form!
      </button>
      ...
    }

【讨论】：

【解决方案3】：

我们在使用功能组件时使用 useHistory。如果我们使用类组件，我们会通过 props 传递历史。即。

      const history = this.props.history;
      history.push('/form');

在按钮示例中，这是在类组件中应该如何完成的：

       <button className="updateBtn" onClick={() => {
              const history = this.props.history;
              history.push('/form');
              this.update(id);
              window.alert(`Item Number: ${id} Was Updated Successfully`);
                }}>U</button>

【讨论】：