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 the latest version of React-router now available i.e. react-router-dom v5.3.0.
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.
Syntax:
import { Route, Link, BrowserRouter as
Router } from 'react-router-dom'
<Router>
<div>
<Route path="/" component={App} /> </div>
</Router>
The above code snippet signifies how react-router works. We, first import the required tags from the react-router-dom dependency. Note that it is written BrowserRouter as Router. This is so we can use the tag <Router> to signify <BrowserRouter>. The <Router> tag is where the routing functionality of the app begins. If a path is stated inside the <Router> component then that path becomes accessible as a new page inside our react application that we can navigate to. In order to specify the path inside <Router>, we use the <Route> component that takes an argument called path, as you can see from the above example. This is where we create the route to a new webpage by passing it to the path argument. The component argument is used to constitute the data that the webpage will render upon going to the path specified in the path argument.
Note: 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”.
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.
Reasons for getting the warning/error: 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.
Solution: 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.
Creating 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
Project Structure: It will look like the following.
Project Structure
Step 3: Here we shall modify only the App.js file. This code snippet 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.
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; |
Step 4: Here we are doing one significant change that is the multiple routes are now enclosed within a <Switch> tag and hence this code snippet will run flawlessly.
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:
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.
