Maybe you will not able to see the fallback loading text, as the file size in not that large, if you do want to ensure it's working throttle your network speed to 'slow 3g' & you will able to see the fallback element. The file size is reduced to 6.8kb& time also has reduced to 15ms. Now when we lazy load the about page, we see the difference. We can simply do that in the index.js file.Įnter fullscreen mode Exit fullscreen mode

To configure routes, we need to connect url in the browser, with our react app, for that react router provides a component called BrowserRouter, with which we need to wrap our entire app.Taking a scenario, suppose a user is on the home page & want's to visit the about page, vice versa. Let's begin with the most common usage for routes. What we'll be covering from the new version. Provides unique URLs for different components in the app and makes the UI easily shareable with other users.Helps create and navigate between different URLs that make up your web application.It is a fully-featured client and server-side routing library for react.

Breaking down all the concepts one by one for better understanding. But trust me they have made it more simpler in the latest version for routing of different pages. Hey folks, I know most of us were using react-router-dom-v5 before & the v6 must be a little bit confusing.

What is react router dom