Question

我正在尝试创建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>
        )
    }
}

有人可以告诉我代码中的问题是什么

Answer 1

您忘记添加路由器组件。

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

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

-编辑

如果未指定Link，则不能使用Router组件。可以使用BrowserRouter（使用内部历史记录api），HashRouter（URL哈希）或通用{{ 1}}（您必须为其提供一些配置）

不变式失败：您不应在<Router>外使用<withRouter（Sidebar）/>

1 个答案: