不变违规：你不应该在 a 之外使用 withRouter()(<Router>使用最少的工作示例)

Question

为什么会出现此错误？

不变冲突：您不应该在<路由器>

。。。我该怎么修？

我想我在某种程度上滥用了路由器

import React, {Component} from "react"
import axios from "axios"
import { withRouter } from 'react-router-dom'
class LoginForm extends Component {
constructor(props) {
super(props)
}
handleSubmit = (event) => {
this.props.history.push("/dashboard")
}
render() {  
return (
<form onSubmit={this.handleSubmit}>
<input type="submit" />
</form>
)
}
}
export default withRouter( LoginForm )

index.js只是：

ReactDOM.render(
<LoginForm />,
document.getElementById("root")
)

Answer 1

withRouter是一个更高阶的组件，无论何时渲染，它都会将最近路由的match、当前location和history道具传递给包装组件。只需将组件连接到路由器即可。源

因此，您的问题是withRouter无法连接到最近的路由器，因为没有。你可以通过添加一个来修复它：

ReactDOM.render(
<BrowserRouter>
<LoginForm />
</BrowserRouter>,
document.getElementById("root")
)