不变违规：您不应该在 <Router> 之外使用 withRouter() （使用最少的工作示例）答案

【问题标题】：Invariant Violation: You should not use withRouter() outside a <Router> (with minimal working example)不变违规：您不应该在 <Router> 之外使用 withRouter() （使用最少的工作示例）
【发布时间】：2021-08-09 00:11:46
【问题描述】：

为什么会出现这个错误？

Invariant Violation：你不应该在
之外使用 withRouter()

...我该如何解决？

我想我在某种程度上滥用了Router

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

【问题讨论】：

标签： reactjs react-router react-router-dom router

【解决方案1】：

withRouter 是一个高阶组件，它将在渲染时将最近路由的match、当前location 和history 道具传递给包装的组件。只是它将组件连接到路由器。 source

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

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

【讨论】：