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

Question

我使用的是React Router。我希望当用户单击按钮时，它引导他们到页面(端点)/form它有UserForm组件。

下面是我包装按钮的代码:

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

Answer 1

所以这不起作用的原因是因为按钮有自己的点击处理程序与链接处理程序分开。您有两个选项可供选择:

• 设置Link标签的样式，使它看起来像一个按钮，但实际上不像一个按钮(如果你需要做额外的逻辑除了路由，这将不起作用)

• 实际使用一个按钮。然后使用React Router提供的'useHistory' React Hook来获取你想要的功能。

组件看起来像这样:

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

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

Answer 2

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

Router语句应该像下面这样设置，通常在App.js

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

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

然后使用下面的as

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