React Summary Day-7

Heyy Everyoneee ! This is Day 7 of learning react from Hitesh Sir (Chai Aur Code). Today i learned about routing through small project. Project was like there is header, footer and they are static, in header three is 3 entities, Home, About and Contact. I learned hoe to create routes for those 3. Today i learned about new hooks, like useParams, useLoaderData etc. I learned about two new tags provided by the react-router-dom. They are Link and NavLink. Link is like anchor tag(<a></a>) but the difference is that the link tag dosent reload the page, where as if we use anchor tag, then it will reload the page. we dont need that, therefore we use link tag. Now then why there is NavLink? so answer is that in NavLink, we can fire callback inside className, for the manipulation, cause in callback, we have have the access of variable, named, isActive, it has the true or false value based on if that link is clicked and the page is active or false if inactive. It is used to highlight the home in different color to show that user is in Home, when user click on About, the About gets highlighted.

Furthermore, i learned hoe to make a router. Its pretty simple, to make router, you need the RouterProvider tag, inside it expects the only one prop named router. We need to create a router and provide it as a prop. Now how to create the router? The router is created by the method known as createBrowserRouter, inside this createBrowserRouter, we call another method named createBrowserElements, and inside it, we get a tag named <Router> and inside it there are attributes, like path, in path we give the path like /, contact, about etc. and other attribute is element, i this we give the component to render on that path, like if path is about, then we give the component of About where About page is defined to render it. We can nest the routes. Like inside About , we want something, then we can don it by nesting it. Another attribute of Route tag is loader, what it does it that, if we want to call the api, then if on particular path, we are calling the api then if we hover on the entity which redirects to that path, then upon hovering, it calls the api and start fetching when we mere hover on the entity, and it stores in the cache, its the optimization. The hook i mentioned earlier, useLoaderData, it gives to data when the loader calls api.

There is one inbuilt component, known as Outlet, what it does that, lets consider we have three tags, header ,footer, and the middle page which displays home, and we want that when we change the path to home to anything like contact or about, then we want that header and footer shall remain static. THen what outlet does is, the entitites/components that render in outlet will only change and not the other components. And i learned how to fetch the values from the url, like if the url is /user/1, then how to fetch 1, its actually pretty simple, we get one hook named useParams(), what we does it that inside the ROute tag, inside path attribute, we give path_name:id this id is fetched by react and by using useParams, we get access to this id, the name must be same when destructuring. This is what i learned today, basically i learned to create the routes and how to use them effectively. Thanks hitesh sir for making it simple and enjoying the series.