React Router: Add additional resources talking about loaders

react/the_react_ecosystem/react_router.md

@@ -1,6 +1,6 @@
 ### Introduction
 
 Up until this point in the curriculum, we have been building one-page applications. However, for any larger scale application, we are going to have multiple pages. Thankfully, the browser allows client-side Javascript to manage the way a user can navigate, with the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API). We can leverage the power of this to manage routing in React with the help of a package like React Router.
 
 ### Lesson overview
 
@@ -14,23 +14,23 @@
 
 ### Client-side routing
 
 Client-side routing is the type of routing where Javascript takes over the duty of handling the routes in an application. Client-side routing helps in building single-page applications (SPAs) without refreshing as the user navigates. For example, when a user clicks a navbar element, the URL changes and the view of the page is modified accordingly, within the client.
 
 Say you are cooking some chicken. If you want to cook it well and nice, you will have to:
 
 1. Put the chicken in the oven and set it to cook with appropriate time and heating
 2. Wait till the dish gives out that satisfying smell
 3. Start munching!
 
 This is common to all websites, you set the oven up for what you want (visit any URL, like [https://theodinproject.com/](https://theodinproject.com/)), wait for the oven to be done with the cooking (the loading screen), and tada, enjoy your delicious food (your page is ready for use). But what if you forgot to add some spices before you cooked it up? You have to repeat this flow again:
 
 1. Get up from your seat
 2. Add the spices to the chicken
 3. Go back to the oven, put the chicken back in and set it up to be reheated
 4. Wait for it to be nice and warm
 5. Now you can eat it!
 
 Here is where we reiterate, **you need to get up from your seat**. In a general multi-page application (MPAs), the browser reloads every time you click on a link to navigate. With client-side routing, **you never leave the page you are on** - you bring a microwave to the table to ensure that you don't have to get up from your seat should you ever run into the "missing spices" issue. The link requests are intercepted by the Javascript that you write, instead of letting them go directly to the server.
 
 ### A Reactive solution
 
@@ -42,7 +42,7 @@
 
 Let's make a small app to understand how this router is implemented. Create a new React project and let's start by adding some mock pages as an example. Create a new `Profile.jsx` file with the following component:
 
 ~~~jsx
 const Profile = () => {
   return (
     <div>
@@ -478,3 +478,4 @@
 - Among the many ways to make protected routes, a few ways are provided below:
     - [This Stack Overflow answer](https://stackoverflow.com/a/64347082/19051112) uses a function to generate the route config object passed to `createBrowserRouter`. The function conditionally generates the different paths.
     - [This demonstration project](https://github.com/iammanishshrma/react-protected-routes/blob/master/src/routes/ProtectedRoute.jsx) creates a special Protected Route component that conditionally displays elements as necessary.
+- Loaders are a very useful concept in React but are out of scope of this lesson. You can learn more about them from the [React Router documentation on Loaders](https://reactrouter.com/en/main/route/loader) and reading this [Medium article on loaders](https://medium.com/@younusraza909/loaders-in-react-router-71558c2988eb). If you're more into video content, you may find this [video on loaders](https://www.youtube.com/watch?v=K-bxVELldCc) from Net Ninja helpful.