Lazy loading routes

At the moment, all the JavaScript for our app is loaded when the app first loads. This is fine for small apps, but for large apps, this can have a negative impact on performance. There may be large pages that are rarely used in the app that we want to load the JavaScript for on demand. This process is called lazy loading.

We are going to lazy load the ask page in this section. It isn't a great usage of lazy loading because this is likely to be a popular page in our app, but it will help us learn how to implement this. Let's carry out the following steps:

1. First, we are going to add a default export to the AskPage component in AskPage.tsx:

export const AskPage = () => <Page title="Ask a question" />;
export default AskPage;

2. Let's open App.tsx and import the lazy function and the Suspense component from React:

import React...