Categories
React Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *