Features of React-router-dom

  • Better support and optimization for React 16.
  • Does not show any warnings in <StrictMode>.
  • Introduction of a new context API.
  • Fully automated releases.
  • Bully backwards compatible with react-router-v4.

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.

Similar Reads

Prerequisites:

NPM & Node.js React JS React-router-dom...

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 should be enclosed within them. Hence, they cannot work when multiple routes are listed within them as children....

Approach :

The solution to this problem is, however, quite straightforward. You simply need to enclose the multiple routes in either a

Steps to Create React Application:

Step 1: To create a react project, open Command Prompt and write the following command:-...

Features of React-router-dom:

...

Advantages of React-router:

...