不变式失败：您不应该在 <Router> 之外使用 <withRouter(Sidebar) />答案

【问题标题】：Invariant failed: You should not use <withRouter(Sidebar) /> outside a <Router>不变式失败：您不应该在 <Router> 之外使用 <withRouter(Sidebar) />
【发布时间】：2020-09-03 10:22:50
【问题描述】：

我正在尝试创建 reactjs 组件并在另一个 tsx 文件中使用，但出现以下错误 不变量失败：您不应该在

之外使用

我的代码如下和我的代码框https://codesandbox.io/s/zen-sound-ztbjl

class Sidebar extends Component<ISidebarProps & RouteComponentProps<{}>> {
    constructor(props: ISidebarProps & RouteComponentProps<{}>) {
        super(props)
        this.state = {}
    }

    componentDidMount = (): void => {
        this.initMenu()
    }

    componentDidUpdate = (prevProps: any): void => {
        if (this.props.type !== prevProps.type) {
            this.initMenu()
        }
    }

    initMenu = (): void => {
        const mm = new MetisMenu('#side-menu')

        let matchingMenuItem = null
        const ul = document.getElementById('side-menu')
        const items = ul.getElementsByTagName('a')
        for (let i = 0; i < items.length; ++i) {
            if (this.props.location.pathname === items[i].pathname) {
                matchingMenuItem = items[i]
                break
            }
        }
        if (matchingMenuItem) {
            this.activateParentDropdown(matchingMenuItem)
        }
    }

    activateParentDropdown = (item: any) => {
        item.classList.add('active')
        const parent = item.parentElement

        if (parent) {
            parent.classList.add('mm-active')
            const parent2 = parent.parentElement

            if (parent2) {
                parent2.classList.add('mm-show')

                const parent3 = parent2.parentElement

                if (parent3) {
                    parent3.classList.add('mm-active') // li
                    parent3.childNodes[0].classList.add('mm-active') // a
                    const parent4 = parent3.parentElement
                    if (parent4) {
                        parent4.classList.add('mm-active')
                    }
                }
            }
            return false
        }
        return false
    }

    render() {
        return (
            <React.Fragment>
                <div className='vertical-menu'>
                    <div data-simplebar className='h-100'>
                        {this.props.type !== 'condensed' ? (
                            // <Scrollbars style={{ maxHeight: '100%' }}>
                            <SidebarContent />
                        ) : (
                            // </Scrollbars>
                            <SidebarContent />
                        )}
                    </div>
                </div>
            </React.Fragment>
        )
    }
}

谁能告诉我我的代码有什么问题

【问题讨论】：

那是写。应该将需要访问路由器或历史记录的所有组件包装在路由器内。希望您阅读 react-router web 文档。我看不到您的代码中使用了路由器的痕迹。

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

【解决方案1】：

您忘记添加路由器组件。

import { BrowserRouter } from "react-router-dom";

const rootElement = document.getElementById("root");
render(<BrowserRouter><App /></BrowserRouter>, rootElement);

--编辑

如果没有指定Router，您不能使用Link 组件您可以使用BrowserRouter（使用内部历史API）、HashRouter（网址哈希）或通用Router（您必须提供一些配置给它）

【讨论】：

请多解释
更新答案。