Javascript 使用<；按钮>；

我正在使用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>

{
更新（id）；
日志（`Item Number:${id}已成功更新`）；
警报（`Item Number:${id}已成功更新`）；
}}>U

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

• 设置链接标记的样式，使其看起来像一个按钮，但实际上不像一个按钮（如果除了路由之外还需要执行其他逻辑，那么这将不起作用）

• 实际使用一个按钮。然后使用获取您想要的功能

组件的外观如下所示：

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

)

const history=useHistory（）
返回(
history.push（“/abc”）}/>
)

---

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

上述代码是否与您的代码一样准确

路由器语句应设置如下，通常在App.js中

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

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

在按钮示例中，下面是如何在类组件中执行此操作：

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

{
const history=this.props.history；
history.push（'/form'）；
更新（id）；
警报（`Item Number:${id}已成功更新`）；
}}>U
按钮不应用于导航。如果愿意，可以将锚定样式设置为按钮，但这是对元素的滥用，也是一个可访问性问题。@isherwood我很好奇，尽管我同意你的看法，但如果你必须同时采取行动和导航，你会如何处理它？我不知道如果没有按钮或类似的东西，如何处理这种情况用户期望发生什么？很明显，导航到表单页面是元素的主要功能。
    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>
      ...
    }

      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>