The error message
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)
The solution
The original demo
ReactDom.render(
<BrowserRouter>
<Nav />
{getRouter()}
</BrowserRouter>,
document.getElementById('app')
)
Resolved Demo (if there are multiple components in The BrowserRouter, add a layer of div to the BrowserRouter)
ReactDom.render(
<BrowserRouter>
<div>
<Nav />
{getRouter()}
</div>
</BrowserRouter>,
document.getElementById('app')
)
As for the reasons, I haven’t studied them in detail yet. If you know some friends, you can communicate with them, or explain them in the comments below. Thank you.