React运行浏览器报错[A <Router> may have only one child element]

今天药忘吃喽~ 2021-12-20 12:59 196阅读 0赞

##### 错误信息 #####

Uncaught Invariant Violation: A <Router> may have only one child element
        at invariant (http://localhost:8111/bundle.js:1071:15)
        at Router.componentWillMount (http://localhost:8111/bundle.js:2413:54)
        at callComponentWillMount (http://localhost:8111/bundle.js:27042:14)
        at mountClassInstance (http://localhost:8111/bundle.js:27135:5)
        at updateClassComponent (http://localhost:8111/bundle.js:30309:5)
        at beginWork (http://localhost:8111/bundle.js:31265:16)
        at performUnitOfWork (http://localhost:8111/bundle.js:34933:12)
        at workLoop (http://localhost:8111/bundle.js:34973:24)
        at renderRoot (http://localhost:8111/bundle.js:35056:7)
        at performWorkOnRoot (http://localhost:8111/bundle.js:35963:7)

##### 解决方法 #####

> 原来的demo

ReactDom.render(
        <BrowserRouter>
    	    <Nav />
    	    {
        getRouter()}
        </BrowserRouter>,
        document.getElementById('app')
    )

> 解决后的demo(如果BrowserRouter中有多个组件需要在BrowserRouter加一层div)

ReactDom.render(
        <BrowserRouter>
            <div>
                <Nav />
                {
        getRouter()}
            </div>
        </BrowserRouter>,
        document.getElementById('app')
    )

> 至于原因还没有去细节研究，如果有知道的小伙伴可以一起交流，或者直接在下面评论解释一下，谢谢，一起学习。