Como mencionado anteriormente, é necessário importar os componentes que serão renderizados quando um usuário navegar para caminhos específicos em nossa aplicação. Para isso, utilizaremos a função lazy da biblioteca React.

A sintaxe para utilizar a função lazy para importar um componente é a seguinte:

import { lazy } from 'react';

const View = lazy(() => import('./View.js'));

Veja o que cada parte dessa sintaxe faz:

• Linha 1: Importa a função lazy da biblioteca React. Essa função permite a divisão de código e o carregamento sob demanda de componentes;
• Linha 3: Declara uma variável (View neste caso) utilizando a função lazy. A função lazy recebe uma função como argumento, e essa função retorna uma declaração de importação dinâmica. A declaração de importação importa de forma assíncrona o arquivo/módulo especificado (neste caso, View.js) utilizando a palavra-chave import. Ao envolver a declaração de importação com lazy, habilitamos o carregamento sob demanda do componente View.js.

Exemplo

Vamos aplicar esse conceito ao nosso projeto importando os componentes para diferentes visualizações. Essas visualizações incluem a página inicial, página sobre e página de contatos. É importante observar que essas visualizações já foram criadas, e nossa tarefa atual é utilizá-las em nosso roteamento:

import { lazy } from "react";

const HomePage = lazy(() => import("../HomePage/HomePage"));
const AboutPage = lazy(() => import("../AboutPage/AboutPage"));
const ContactsPage = lazy(() => import("../ContactsPage/ContactsPage"));

Utilizamos a função lazy da biblioteca React para importar os componentes de diferentes visualizações. Cada componente é importado de forma dinâmica utilizando a declaração import, e especificamos os caminhos relativos para os arquivos dos componentes (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Ao importar esses componentes com carregamento sob demanda, garantimos que eles sejam carregados apenas quando necessário, contribuindo para uma experiência do usuário mais eficiente e responsiva.