Open In App

Why to get “Router may have only one child element” warning ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Prerequisites:

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.

Approach :

The solution to this problem is, however, quite straightforward. You simply need to enclose the multiple routes in either a <div> tag or a <Switch> tag. The <Switch> tag is mostly preferred out of the two as <Switch> is unique and it is able to render a route exclusively.

Syntax:

import { Route, Link, BrowserRouter as 
Router } from 'react-router-dom'
<Router>
<Switch>
<Route path="/" component={App} />
<Route path="/" component={Home} />
</Switch>
</Router>

The path “/” signifies default path or home, which means that upon specifying executing it, the router will route us to the starting point of the app or the home page of the app. To create a custom path simply put “/pathname” and a new path to a new webpage inside the app will be created, having the name “pathname”.

Note: For react-router-dom@^6 and above, use <Routes> to enclose all the <Route> elements.

Steps to Create React Application:

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

npx create-react-app test

Step 2: Now navigate to the new created directory by typing,

cd test

Step 3: Install the required packages

npm i react-router-dom^v5.3

Project Structure:

Project Structure

The updated dependencies in packages.json file.

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.3.4",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},

Example 1: This example implement router without using switch component and hence will throw the error, “Router may have only one child“, as you can see that multiple routes have been enclosed within a single <Router> tag, which is not supported.

Javascript




// Filename - App.js
import React from "react";
import "./App.css";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
} from "react-router-dom";
 
function App() {
    return (
        <div className="App">
            <Router>
                <Route path="/child1">
                    <div>
                        <p>This is child route 1</p>
                    </div>
                </Route>
                <Route path="/child2">
                    <div>
                        <p>This is child route 2</p>
                    </div>
                </Route>
            </Router>
        </div>
    );
}
 
export default App;


Example 2: This example use the Switch component to enclose all the Route components hence this example will run flawlessly.

Javascript




// Filename - App.js
 
import React from "react";
import "./App.css";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
} from "react-router-dom";
 
function App() {
    return (
        <div className="App">
            <Router>
                <Switch>
                    <Route path="/child1">
                        <div>
                            <p>This is child route 1</p>
                        </div>
                    </Route>
                    <Route path="/child2">
                        <div>
                            <p>This is child route 2</p>
                        </div>
                    </Route>
                </Switch>
            </Router>
        </div>
    );
}
 
export default App;


Step to run the application: Open the terminal and type the following command.

npm start

Output: This output will be visible on the http://localhost:3000 on the browser window.

Changing the route to display a new webpage

This is how you can solve the problem of “Router may have only one child” with ease.

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.

Advantages of React-router:

  • Viewing declarations in a standardized structure helps us to instantly understand what are our app views
  • Lazy loading of code.
  • Using the useHistory hook of React-router, we can navigate forwards and backwards and even restore the state of our app.
  • We have the facility to code CSS-transitions upon navigating from one page to another.
  • Provides a standardized application structure. Very helpful when working with large teams.


Last Updated : 20 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads