Overview :

In this session, we have developed dummy website to understand routing between components with the implementation of React Router, a crucial aspect of building dynamic and navigable web applications. We structured our project with multiple components, including Home, About, Contact, User, Github, and Footer. To streamline our layout, we introduced a central component, Layout.jsx, where the Header and Footer remain constant while the <Outlet/> dynamically changes based on the selected route. We are also looking at how we are accessing the dynamic values in our user cmponent. We will also call github API using fetch and load the data like Name, followers, github profile pic from github.

Router Provider element :

In here we have rendered RouterProvider element and we are passing the router={router} as an attribute. Then we created Layout.jsx as an root component to switch from one component to another as following

Implementation in Layout.jsx :

second route syntax consist of same logic but with different syntax. This way of syntax comes with the functionality of createRoutesFromElement() in which we can pass which again has attributes like path & element. In this syntax when you use Route first time, then in element attribute you have to pass at the top and next route you can pass other path & components which will render

There are 2 methods to define route:

first method:

This first syntax of router comes with attributes like path, element, children array where path consist of '/' (path of the component like , 'about,'contact' etc). In element attribute we are rendering component where we used our Outlet using which we can switch between components.

Second way of writing route:

second route syntax consist of same logic but with different syntax. This way of syntax comes with the functionality of createRoutesFromElement() in which we can pass which again has attributes like path & element. In this syntax when you use Route first time, then in element attribute you have to pass at the top and next route you can pass other path & components which will render

---

Getting access of Dynamic Values of user component

We demonstrated the ability to receive dynamic values in a component using the useParams() hook. By defining routes with parameters like user/:userid, we extracted the value using the hook in the corresponding component.

for this we simply pass the And in User component where we are loading this value written after colon, we extract the this value using useParams Hook. In Short, Receiving Dynamic Value of 'userid' in the componment using useParams() hook for passed value in path attribute of Route.

Output of User Component

---

Optimize Github Component with loader

To enhance API data retrieval, we incorporated the loader attribute in the <Route/> component. This attribute allows us to specify a loader function, enhancing the efficiency of data fetching.

githubInfoLoader function in GitHub Component

We showcased a practical example using the GitHub API to fetch and display user information. The githubInfoLoader async-await function was introduced within the GitHub component, where API data was fetched and converted to JSON. This function was then referenced in the loader attribute for improved optimization.

---

Conclusion:

These advancements in React Router and optimization techniques empower developers to create dynamic, efficient, and user-friendly web applications. By incorporating dynamic routing, handling dynamic values, and optimizing data fetching, we ensure a seamless user experience.