Sometimes, we want to fix the “A Router may have only one child element” error with React Router.

In this article, we’ll look at how to fix the “A Router may have only one child element” error with React Router.

How to fix the “A Router may have only one child element” error with React Router?

To fix the “A Router may have only one child element” error with React Router, we should wrap our components within the Router component with a wrapper component.

For instance, we write

<Router>
  <div>
    <Route exact path="/" component={BaseLayer} />
    <Route path="/editor" component={App} store={store} />
  </div>
</Router>

to wrap a div around the Route components so that the error goes away.

Conclusion

To fix the “A Router may have only one child element” error with React Router, we should wrap our components within the Router component with a wrapper component.