In this article, We will learn about React router relative links and absolute links with examples. We will see how to implement Lazy loading with React router.

relative links and lazy loading


React Router Relative Links

A relative link is a link that does not start with a forward slash and will inherit the closest route in which they are rendered.

Products.js

import React from 'react'
import { Link, Outlet } from 'react-router-dom'

export const Products = () => {
  return (
    <>
      <div>
        <input type='search' placeholder='Search products' />
      </div>
      <nav>
        <Link to='featured'>Featured</Link> &nbsp;
        <Link to='new'>New</Link>
      </nav>
      <Outlet />
    </>
  )
}

Products page:- http://localhost:3000/products

When you click on the Featured link, the URL will be http://localhost:3000/products/featured

When you click on the New link, the URL will be http://localhost:3000/products/new

Since the product page is rendered at slash products, the featured link will append slash featured to slash products and the new link will append slash new to slash products


React Router Absolute Links

Now, if you wish to use absolute paths the path would not be featured or slash new, this will construct the path from the root of the app and not the current URL.

Products.js

import React from 'react'
import { Link, Outlet } from 'react-router-dom'

export const Products = () => {
  return (
    <>
      <div>
        <input type='search' placeholder='Search products' />
      </div>
      <nav>
        <Link to='/featured'>Featured</Link> &nbsp;
        <Link to='/new'>New</Link>
      </nav>
      <Outlet />
    </>
  )
}

Products page:- http://localhost:3000/products

When you click on the Featured link, the URL will be http://localhost:3000/featured

When you click on the New link, the URL will be http://localhost:3000/new

If we take a look at the browser you can see that when I click on new it navigates to slash new, when I click on featured it navigates to slash featured, the links are breaking.

To make this work with absolute links you need to add slash products slash featured and slash products slash new, only then would it work as expected.

Products.js

import React from 'react'
import { Link, Outlet } from 'react-router-dom'

export const Products = () => {
  return (
    <>
      <div>
        <input type='search' placeholder='Search products' />
      </div>
      <nav>
        <Link to='/products/featured'>Featured</Link> &nbsp;
        <Link to='/products/new'>New</Link>
      </nav>
      <Outlet />
    </>
  )
}

Products page:- http://localhost:3000/products

When you click on the Featured link, the URL will be http://localhost:3000/products/featured

When you click on the New link, the URL will be http://localhost:3000/products/new

Since the product page is rendered at slash products, the featured link will navigate to slash products slash featured and the new link will navigate to slash products slash new.


React Router Lazy Loading

We're going to learn, how to lazy load routes with react-router.

Lazy loading is a technique where components are not required on the home page, can be split into separate code bundles, and downloaded only when the user navigates to that page.

You can think of it as incrementally downloading the application. It helps reduce initial load time thereby improving performance. 

For our example, let's learn how to lazy load the about page.

What I first want to do is make the about component bulky on purpose, let me add some dummy data in the about component.

Now, I want you to observe the bundle size when the entire app is loaded on the initial load.

Open dev tools, open the network tab, right-click empty cache and hard reload, you can see that the main chunk is about --- kb and takes --- milliseconds to load.


Now, let's lazy load the about page and observe the difference. To lazy load a route, we need to use dynamic imports and react suspense.


Step 1 

import statement for about page instead I'm going to use the dynamic

import syntax for dynamic imports, we need a default export of the component, in about.js remove the export keyword, and at the bottom export default about

About.js

import React from 'react'

const About = () => {
  return (
    <div>
      About page

      adsf adf adf adsf aff asdffljadlfjladfljasfdljaldjf a
      dfsl lsddjf l asfjlas d salfdf ladfl asdffljadlfjladf
      ljasfdljaldjfasdfjl  adf ad f afdf  adffasdfasdffasdf

      adsf adf adf adsf aff asdffljadlfjladfljasfdljaldjf a
      dfsl lsddjf l asfjlas d salfdf ladfl asdffljadlfjladf
      ljasfdljaldjfasdfjl  adf ad f afdf  adffasdfasdffasdf

      adsf adf adf adsf aff asdffljadlfjladfljasfdljaldjf a
      dfsl lsddjf l asfjlas d salfdf ladfl asdffljadlfjladf
      ljasfdljaldjfasdfjl  adf ad f afdf  adffasdfasdffasdf

      adsf adf adf adsf aff asdffljadlfjladfljasfdljaldjf a
      dfsl lsddjf l asfjlas d salfdf ladfl asdffljadlfjladf
      ljasfdljaldjfasdfjl  adf ad f afdf  adffasdfasdffasdf


    </div>
  )
}

export default About


Step 2

In app.js, use react lazy and dynamic imports

so import react at the top and then the about component

const lazy about is equal to react dot lazy, lazy is a function that takes another

function as an argument,  this argument calls a dynamic import,  so import from the components folder from the About file.

App.js


import React from 'react'
import Welcome from './components/Welcome'

const LazyAbout = React.lazy(() => import('./components/About'))

function App() {
  return (
    <Routes>
      <Route path="/" element={<Welcome />} />
      <Route path="about" element={
        <React.Suspense fallback='Loading...'>
          <LazyAbout />
        </React.Suspense>
      } />
   
    </Routes>
  );
}

export default App;


A promise is returned by this dynamic import which is then converted into a module that contains a default exported react component which of course is our about component.

So that is our step one, step two we include the lazy component as part of the route configuration lazy about.

Let's save the files and head to the browser

If I now empty cache and hard reload, you can see in the network tab the main chunk has reduced from 

-- kb to -- kb and time also has reduced from -- milliseconds to -- milliseconds. We have improved our initial load time.


If you want to learn more about react-router-dom