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

Posted 2023-02-21

【中文标题】不变违规：您不应该在 <Router> 之外使用 withRouter() （使用最少的工作示例）

【英文标题】：Invariant Violation: You should not use withRouter() outside a <Router> (with minimal working example)

【发布时间】：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")
)

【参考方案1】：

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

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

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