Reasons for getting the warning/error in react-router-dom
So, coming to the motive of this article, novice developers often run into a very popular warning when working with react-router, simply known as “Router may have only one child“. Before knowing how to fix this problem, let us understand why it occurs. Generally, navigation in a React-based environment is used over the whole application. That is why React components like BrowserRouter or Router expect that only the top-level component that is <App> should be enclosed within them. Hence, they cannot work when multiple routes are listed within them as children.
Why to get “Router may have only one child element” warning ?
React Router Dom is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router Dom works in both places. We will be taking into consideration react-router-dom v5.3.0.